Skip to main content
Tesslate OpenSail

​
What it is

Design Engineer turns the Live Preview into a first-class editor. Click any element and the code that renders it opens, highlighted, in Monaco. Inspect the element’s computed CSS, tweak props visually, insert new components from a palette, and let the agent keep track of what changed. No context-switching from browser to editor.

Click to source

Click any rendered element, land on the exact file and line that produced it.

Two-way sync

Changes in the editor update the preview. Edits on the preview update the source.

CSS inspector

Inspect any element’s computed styles, classes, and Tailwind utilities.

Insert palette

Drop pre-built sections, components, or primitives into the running app.

​
How click-to-source works

OpenSail’s dev server injects a data-oid attribute on every JSX element it compiles. The attribute encodes the file path and the AST location. When you click an element in the preview iframe, the overlay reads data-oid and tells Monaco to jump to the exact line. 
<div data-oid="oid:src/components/Hero.tsx:42:7">
  <!-- rendered hero section -->
</div>
The OID index is kept in memory on the backend and rebuilt incrementally as the agent or you edit files. No custom build step on your end.
The data-oid attribute is only added in dev mode. Production builds strip it automatically. Your shipped app never leaks source paths.

​
The workflow

1

Enable Design mode

Toggle the Design tab in the builder. The preview iframe gets a transparent selection overlay that tracks hover and click.
2

Click anything

Hover to highlight an element’s bounding box. Click to select. The editor jumps to the source and highlights the matching JSX block.
3

Inspect

The CSS inspector panel opens beside the preview with computed styles, applied classes, parent chain, and bounding box metrics.
4

Edit

Change a class, a prop, or the tree structure. Save. The preview hot-reloads with the change in place.
5

Or ask the agent

Select an element and ask in chat: “make this card use a subtle gradient”. The agent already knows which file and block you mean.

​
The CSS inspector

Every computed CSS property resolved at the browser layer. Useful for understanding cascade conflicts or unexpected values.

​
Two-way sync

Every edit source roundtrips both directions.
You doWhat updates
Save a file in MonacoPreview hot-reloads via Vite HMR
Click an element in the previewEditor jumps to the source block
Change a class in the inspectorFile is patched and saved atomically
Drag a block from the Insert paletteJSX is inserted at the chosen position; file saves
Agent runs apply_patchPreview hot-reloads; any selected element re-highlights
The inspector’s class edits go through patch_file under the hood, so they produce clean diffs the agent can see and you can commit. Nothing is edited in memory only.

​
The Insert palette

The Insert palette is a grid of pre-built sections, components, and primitives keyed to your project’s framework and design system. It ships with curated content for Vite React and Next.js projects and picks up custom entries from your project’s .tesslate/components.json.
1

Open the palette

Click Insert or press I with the preview focused.
2

Pick a block

Browse by category (Hero, Pricing, Feature Grid, Nav, Footer, Form, Table). Every block is a live preview itself.
3

Drop it in

Drag the block onto the preview. A drop indicator shows the insertion point. Release to insert.
4

Customize

The block is now source code in your project. Edit props, swap content, restyle through the inspector or chat.

​
Agent + Design Engineer together

The visual layer is complementary to the agent. Typical patterns:
Select an element and say “this is too cramped”. The agent sees the element OID, reads the surrounding code, and suggests spacing changes with a preview diff.
Select one card. Ask: “apply this pattern to every card on this page”. The agent finds all matching elements and applies the update consistently.
Select a block. Ask: “extract this into a reusable component”. The agent creates the file, replaces the inline block with a call, and the preview stays identical.
Drop a screenshot into chat. Say “rebuild the hero section to match this”. The agent generates the JSX, you refine the spacing and colors visually.

​
Frameworks supported

Design Engineer is framework-aware:
FrameworkOID injectionInsert paletteInspector
Vite + React (TSX/JSX)YesYesFull
Next.js (App Router, Pages Router)YesYesFull
Astro (.astro components)YesLimitedFull
SvelteKitRoadmapRoadmapBasic
Vue (Vite)RoadmapRoadmapBasic
For frameworks without OID support yet, you still get the CSS inspector and HMR-backed preview; click-to-source falls back to DOM-path heuristics.

​
Performance

Click-to-source resolves in under 50 ms on normal page sizes. The overlay is a single absolutely-positioned React tree that only re-renders on hover or selection change. Classes applied via the inspector write through the same file-patch pipeline as the agent, so no special handling needed.
Design mode runs only in dev. The OID attributes, overlay, and inspector are stripped from production builds automatically by the dev-server plugin.

​
Keyboard

ShortcutAction
IOpen Insert palette
EscClear selection
Shift + clickSelect parent element
Alt + clickInspect without selecting
Cmd/Ctrl + clickJump to source, keep preview focused

​
Best practices

Start with the palette

Drop a hero or a pricing table, then customize. Faster than building from zero.

Iterate visually, commit in code

Every inspector tweak is a real file edit. Review diffs and commit when you like what you see.

Pair with the agent

Selection context gives the agent a head start. “Fix this” with an element selected beats “fix the hero section”.

Use typed components

TypeScript props light up better in the inspector. Use interface or type declarations on every component.

​
Troubleshooting

The dev server may not have injected OIDs yet. Hard-refresh the preview. If it persists, restart the dev container; the OID plugin picks up on Vite’s next boot.
Wait for the HMR patch to land. If the file was just edited and the inspector shows old values, click the element again to re-query the DOM.
The palette indexes from your framework and from .tesslate/components.json. Make sure your project runtime is supported or the custom catalog file exists.

Live Preview

The iframe the overlay runs on top of.

Code Editor

Monaco’s end of the click-to-source jump.

Architecture Panel

Canvas-level structure; Design Engineer handles the rendered output.

Using Agents

Pair selections with chat for visual-first development.