All questions

Visual editor

What are the limits of Draftbit's visual editor?

The visual editor edits what it can read from your source. It handles screens, the component tree, utility-class styles, static text, and adding or reordering components. Logic, data, dynamic text, inline style objects, packages, and native configuration stay in code, where an agent or the code editor takes over. Saving code edits yourself needs the Standard plan.

Reviewed September 2, 2026

The visual editor is a view over real source files, so its limits follow from what it can parse and what it has controls for. It reads the JSX in mobile and web screens and the markup in Astro pages, shows each element in the component tree with its source position, and lets you select, add, reorder, style, and edit text. Anything that is not an element in that file, such as a hook, a data fetch, a navigation handler, or a value computed at runtime, has no visual control.

The Styles tab covers a fixed set of utility-class controls for layout, flex, spacing, sizing, position, borders, background color, opacity, and typography, plus a field for typing any other class and a breakpoint selector. It works on class names, so styles written as inline style objects or calculated in code stay in code. The Content tab edits text only when that text is a plain string in the file. Text that comes from a prop, a variable, or an API response is not editable there, and the tree shows conditionals and mapped lists as branches while the condition itself is edited in code.

Adding components has rules too. You add into a selected parent, some parents do not accept certain children, and some components ask for required props or configuration before they can be placed. Components defined in other files show up as one item each, so their internals are edited in their own file.

Beyond the canvas, the code editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown but not native iOS or Android source. Native packages need fresh native preview builds, and publishing to the stores needs your own Apple and Google credentials. The builder itself is supported in Chromium browsers and Firefox, with Safari and embedded webviews not officially supported.

None of this is a dead end. Ask an agent to make the change, open the Code tab or the Code Editor, add a package, export the project, or bring in a Draftbit expert. The trade-off is that a heavily customized area may no longer be adjustable from the Styles or Content tabs. Visual editing itself is included on every plan, while saving code edits yourself needs the Standard plan or higher.

Start with your app idea

Create a free account and describe what you want to build.

Get started free