teta.so
Sign in

Visual Editor

The visual editor lets you click on any element in your app preview and adjust its styles directly. Instead of writing CSS by hand or describing changes in chat, you select an element and modify its properties through a visual panel. Changes are saved automatically and persist across sessions.

Activating Inspector Mode

To start using the visual editor, click the inspector toggle button in the preview toolbar. When active, the preview enters inspector mode: hovering over elements highlights them with an outline, and clicking an element selects it for editing.

You will see a blue outline around elements as you hover, showing the element boundaries. Click to select, and the properties panel opens on the side.

To exit inspector mode, click the toggle again or press Escape. The preview returns to its normal interactive state where you can click links, submit forms, and use the app as a visitor would.

Selecting Elements

With inspector mode active, click any visible element in the preview to select it. The selected element gets a persistent highlight, and the properties panel populates with its current styles.

You can select text, images, buttons, containers, sections, and any other HTML element rendered by your SvelteKit components. The inspector works with both static and dynamic content.

If an element is hard to click because it is small or overlapping, try hovering carefully and watching the highlight to confirm you are targeting the right element before clicking.

Properties Panel

The properties panel is organized into sections, each controlling a different aspect of the selected element's appearance.

Spacing

The Spacing section controls the padding of the selected element. Adjust padding values for each side (top, right, bottom, left) individually. Values are set in pixels and apply immediately to the preview so you can see the effect in real time.

Size

The Size section lets you control:

  • Width - Set explicit width values or leave auto for natural sizing.
  • Height - Set explicit height values.
  • Gap - Control the space between child elements (useful for flex and grid containers).
  • Display - Change the display mode (block, flex, grid, inline, none). This is particularly useful for controlling layout behavior.

Typography

The Typography section handles all text-related properties:

  • Font size - Control the text size in pixels or rem.
  • Font weight - Set the weight from thin (100) to black (900), or use named values like normal and bold.
  • Line height - Adjust the vertical spacing between lines of text.
  • Text align - Set alignment to left, center, right, or justify.
  • Color - Pick the text color using the color input or enter a hex/RGB value directly.

Fill

The Fill section controls the element background and shape:

  • Background - Set a background color using the color picker or enter a value manually. Supports solid colors.
  • Opacity - Control the transparency of the entire element, from 0 (invisible) to 1 (fully opaque).
  • Border radius - Round the corners of the element. Set a single value for uniform rounding or adjust each corner independently.

Border

The Border section manages element borders:

  • Width - Set the border thickness in pixels.
  • Style - Choose from solid, dashed, dotted, or none.
  • Color - Pick the border color.

How Changes Are Saved

When you modify a property in the visual editor, the change is saved as a CSS override. Teta persists these overrides in two places:

  1. Supabase - Your visual edits are stored in the project metadata so they survive across sessions and devices.
  2. Sandbox CSS file - The edits are written to a CSS file in your project sandbox so they take effect immediately.

This approach means your visual edits layer on top of the styles defined in your Svelte components. The original component code is not modified. Instead, the visual edits act as a CSS override sheet with high specificity.

When you redeploy or reconnect to your sandbox, the visual edits are automatically restored from Supabase.

Combining Visual and Chat Editing

The visual editor and chat editor complement each other well. Use each for what it does best:

Use the visual editor for:

  • Fine-tuning spacing and padding
  • Adjusting font sizes and colors
  • Changing background colors
  • Tweaking border radius values
  • Getting pixel-perfect alignment
  • Quick style experiments

Use the chat editor for:

  • Creating new components and pages
  • Adding interactivity and logic
  • Structural HTML changes (adding/removing elements)
  • Complex responsive layouts
  • Database integration
  • Installing packages and dependencies

A productive workflow is to use chat to build the structure, then switch to the visual editor to polish the styling. For example, ask the AI to "Create a pricing card component," then use the visual editor to fine-tune the padding, adjust the font sizes, and perfect the border radius until it looks exactly right.

Limitations

The visual editor is a CSS styling tool. It has some boundaries to be aware of:

  • CSS only. The visual editor changes styles, not HTML structure. You cannot add or remove elements, change text content, or modify component props through the visual editor. Use the chat or code editor for structural changes.
  • Element-level styling. Changes apply to the selected element instance. If you want to change the base style of a reusable component, edit the component code directly via the chat or code editor.
  • Specificity. Visual edits use high specificity (!important) to override scoped SvelteKit styles. In rare cases, this may conflict with existing important declarations in your code.
  • Dynamic elements. Elements that are conditionally rendered or created by JavaScript loops can be selected when visible, but the changes apply based on CSS selectors, so the behavior depends on the element's selector uniqueness.

FAQ

Do visual edits survive deployment?

Yes. Visual edits are persisted in your project metadata on Supabase and are included when your app is deployed. They are written as a CSS file that is part of your project.

Can I see what CSS the visual editor generated?

The visual edits are stored as CSS overrides. You can view the generated CSS file in the code editor to see exactly what rules were created. This is useful if you want to move the styles into your component code permanently.

Will the visual editor overwrite my component styles?

No. The visual editor creates a separate CSS layer that sits on top of your component styles. Your original Svelte component code is not modified. If you remove a visual edit, the original component style takes effect again.

Can I use the visual editor on mobile-sized previews?

Yes. Resize the preview panel to simulate different viewport widths, then use the visual editor to adjust styles at that size. Note that the visual edits apply at all viewport sizes since they are not media-query scoped by default. For responsive adjustments, use the chat editor to add proper media queries.

How do I remove a visual edit?

Select the element in inspector mode and reset the property value in the properties panel. You can clear individual properties or remove all overrides for that element.