Build6 min read
Sketch an app on paper or a tablet and turn it into a working app with AI
The Draimo team
Short answer
Draw each screen of your app on a Draimo Ink page, with labels for buttons, lists and fields. Press Make it real: Draimo reads the sketch, lets you correct each part, and builds a working React app where every button does what its label says. It checks the code against every part you confirmed before it builds, and you can download the project or host it.
Try it in Draimo
Start with a sketch
- Make it real
- Sketch the screens and get a working React app or website, checked against your sketch.
- Draimo Lite and Draimo Pro
- Download code
- Take the whole project, source and build, as a zip.
- Any plan that built it
- Hosting
- Put a built site or app on its own address, and connect your domain with one DNS record.
- Draimo Pro
Draw what matters, label everything
A sketch does not need to be neat. It needs to be specific: a box with "Add habit" written in it is a button that adds a habit; a column of lines under "Today" is a list. Draw one screen per area of the page, and write the screen's name above it. Arrows between screens tell Draimo where a button leads.
- Write the words you want on each control: they become its label.
- Draw example rows if you want the list to start with them; otherwise it starts empty with a clear first step.
- Note what the app should remember, such as "habits: name, done today".
Correct the reading before anything is built
Make it real returns what it saw as a list of parts, grouped by screen, with what each one does. Fix anything it misread, add what it missed, and choose Phone app or Web app. Nothing is built and nothing is charged until you press Build and confirm the price.
A phone app leads with a phone screen: bottom tabs, controls sized for a thumb, and a manifest so it installs to the home screen like an app. A web app leads with a laptop layout and a sidebar, and still works on a phone.
What gets built
A React and Vite project, built and served from a real build, not a mock-up. Lists add, edit and delete; forms check their input and say what is wrong next to the field; totals and filters work. Data is kept on the device. Anything that needs an outside service, such as taking payment, is built honestly as a screen whose button says it needs connecting.
Before the build, every part you confirmed has to appear in the code. If one is missing, Draimo makes one targeted fix, and the result tells you how many parts match, naming any it could not add.
- Sketch the screens on a Draimo Ink page.
- Press Make it real and correct the reading.
- Choose Phone app or Web app, confirm the price and build.
- Open the preview at phone, tablet and desktop width.
- Download the code, ask for a change in plain words, or host it.
Keep it, change it, ship it
Download code gives you the full project: `npm install && npm run build` reproduces exactly what was served. Ask for a change and it rebuilds the same project. On Draimo Pro, Host it puts the app on its own address, and edits redeploy on their own. See hosting on your own domain.
Questions people ask
- Do I need to know how to code?
- No. You sketch and correct the reading. If you do code, the project is plain React and Vite that you can download and extend.
- Can the app save data?
- Yes, on the device, so a list is still there tomorrow. Shared accounts and a server database are not part of a build yet.
- How long does a build take?
- A few minutes. It runs in the background, so you can keep drawing or close the tab and come back to it.
- Which plans include it?
- Draimo Lite and Draimo Pro. Hosting on its own address is Draimo Pro.
Sources we checked
- React: Quick start
- Vite: Getting started
- MDN: Making PWAs installable
- W3C: Target size (minimum), WCAG 2.2
Checked 12 October 2026. Dates and amounts change every year. Ask Draimo for this year's figures, grounded in official sources.
Draw the first screen. The rest follows.
Open Draimo Ink
