Designer
Build your app’s screens against the backend they will actually use. Describe a change in plain language or edit directly, bind to your real collections, preview with your own records, and export a Flutter project that runs.
Where it lives
Open any project and choose Designer in the sidebar. It opens on design.koolbase.com with a session scoped to that one project — your design documents, collections and records, and nothing from anywhere else.
There is also a public demo at koolbase.com/try — no account, saved in your browser. Everything works there except the parts that need a project: real data and code export.
What it is, and what it is not
The Designer is a screen builder for Flutter apps backed by Koolbase. It is not a general design tool, and it is deliberately not a canvas of free-floating shapes: everything you place is a real widget in a real layout, because the output is code rather than a picture.
Two ways to see what you are building. Preview shows the design, instantly, with sample data. Run compiles your app and opens the real thing in the frame — real sign-in, real records — in about three minutes. And Export hands you the project: Riverpod, typed routes, localisation, a test per screen, running on iOS, Android and the web.
That constraint is the point. A design that cannot be expressed as a Flutter layout cannot be drawn here, which means what you see is what the app does.
Your first screen
Open Designer from your project’s sidebar. A new project starts with one screen and a few elements.
Type a change into the bar at the bottom — “add an email field above the button”. You get a proposed change to review before anything is applied, and one undo to reverse it.
Drag widgets from the left panel, or select anything on the canvas and edit its properties on the right.
Bind a list to one of your collections in the Data tab, then press Preview to see it with your own records.
Press Export code for a Flutter project you can run.
How work is saved
Changes save automatically to your project. Every edit is a single undoable step, whether you made it by hand or asked for it in words.
If the same design is open in two places, the second save is refused rather than silently overwriting the first — you are shown both and choose which to keep.