Design View & Theme Editor

Visually change colors, fonts, and theme presets across your entire app with live preview.

What is Design View

Design View is a visual theme editor that extracts design tokens from your live app preview and lets you change them directly. Instead of writing prompts like "make the background darker," you pick the exact color you want. When you apply, the AI rewrites your source code with the new design system.

Design View handles three aspects of your app's visual identity: colors (backgrounds, text, accents, borders), typography (heading and body fonts), and theme presets (complete design systems in one click).

How to Open

Open your app

Navigate to any app in the editor.

Click the palette icon

Click the palette icon in the activity bar (left sidebar).

Start editing

Design View opens as a panel, extracting colors and fonts from your live preview.

Design View works best when your app is fully loaded in the preview. Wait for the preview to finish rendering before opening the panel.

Color Palette

Design View automatically detects colors used in your app and groups them by role: backgrounds, text, accents, and borders. Click any color swatch to open a color picker and choose a new value. Changes appear instantly in the live preview.

You can also enter hex values directly for precise brand color matching. The preview updates in real time as you adjust.

Typography

Change heading and body fonts from a curated list of web-safe and Google Fonts. Select a font and see it applied immediately in the preview. Typography changes affect the entire app consistently.

Theme Presets

Theme presets apply a complete design system — colors and fonts — in one click. Available presets include:

Dark — Dark backgrounds with light text and vibrant accents
Light — Clean whites with subtle grays and professional blues
Sepia — Warm tones inspired by aged paper
Ocean — Cool blues and teals with a calming feel
Forest — Natural greens with earthy undertones
Sunset — Warm oranges and purples for a bold look

After applying a preset, you can further customize individual color tokens and fonts. Presets are starting points, not locked-in choices.

Applying Changes

While you adjust colors and fonts, the preview shows a live override — your actual code is not modified yet. When you are happy with the result, click Apply. The AI then rewrites your source code (CSS variables, Tailwind classes, inline styles) to match the new design tokens.

Applying creates a new version in your version history. You can always roll back if the result is not what you expected.

Tips for Best Results

Start with a theme preset to establish a baseline, then fine-tune individual colors.
Use high-contrast color combinations for accessibility.
Preview on both desktop and mobile frames before applying.
For complex multi-file apps, Design View updates all files consistently — no need to change colors file by file.

FAQs

Is Design View available on the Free plan?▾

Yes. Design View is available on all plans including Free. There are no feature restrictions based on plan.

Does Design View modify my actual code?▾

Yes. When you click Apply, the AI rewrites your source code to use the new design tokens — CSS variables, Tailwind classes, and inline styles are all updated. You can see the changes in the code editor afterward.

Can I undo a design change?▾

Yes. Applying a design change creates a new version. Open Version History in the sidebar and restore any previous version to undo the change.

What is the difference between Design View and the Visual Editor?▾

The Visual Editor lets you click individual elements to edit text, styles, and layout. Design View changes the overall theme — colors and fonts across the entire app at once. Use Design View for branding and theming, and the Visual Editor for element-level tweaks.

Security & Code Quality GenMB Code