Skip to main content

Web Canvas

The web canvas is Pixello's visual editor. It renders your designs, lets you edit them visually, and keeps everything in sync with your code.

What Is the Web Canvas?​

The web canvas is a web-based visual editor that:

  • Renders designs: Displays your design JSON as a visual interface
  • Enables editing: Lets you modify designs by clicking and dragging
  • Stays in sync: Updates design JSON files, which trigger code generation
  • Runs in webview: Embedded in your editor, not a separate application

Why a Web Canvas?​

Familiar Interface​

Web-based editors are familiar to developers. The canvas feels like working in a browser, which makes it intuitive.

Rich Interactions​

Web technologies enable:

  • Smooth animations and transitions
  • Complex layout editing
  • Real-time preview
  • Responsive design tools

Cross-Platform​

Since it's web-based, the canvas works the same on:

  • macOS
  • Windows
  • Linux

No platform-specific code needed.

Easy Updates​

Web-based means updates are instant. No need to update the extension to improve the canvas.

How It Works​

Rendering​

  1. Reads Design JSON: The canvas loads your design JSON file
  2. Parses structure: Understands components, layouts, and styles
  3. Renders visually: Displays the design as you'd see it in a browser
  4. Updates in real-time: Changes to design JSON refresh the canvas

Editing​

When you edit in the canvas:

  1. You make a change: Click, drag, or type to modify the design
  2. Canvas updates JSON: Writes the change to the design JSON file
  3. Extension detects change: Monitors the file system
  4. Code regenerates: MCP server updates code files to match
  5. Everything stays in sync: Design and code are aligned

File Interaction​

The canvas never writes directly to disk. Instead:

  • It updates the design JSON file
  • The design JSON is the source of truth
  • Code generation reads from design JSON
  • This ensures consistency and prevents conflicts

Canvas Location​

The canvas is accessible at:

👉 https://studio.pixello.tech

When you open a design in Pixello, the extension opens the canvas in a webview, pointing to your design JSON file.

Features​

Visual Editing​

  • Select elements: Click to select components
  • Modify properties: Edit styles, content, and layout
  • Drag and drop: Rearrange components visually
  • Responsive preview: See how designs look on different screen sizes

Real-Time Sync​

  • Instant updates: Changes appear immediately
  • Bidirectional: Edit in canvas or code, both stay in sync
  • Conflict resolution: Handles simultaneous edits gracefully

Component Library​

  • Pre-built components: Use common UI patterns
  • Custom components: Add your own reusable elements
  • Style presets: Apply consistent styling across designs

Integration with Editor​

Webview​

The canvas runs in a VS Code/Cursor webview:

  • Embedded in your editor
  • Shares the same window
  • Can be docked, split, or moved
  • Feels like part of the editor

Command Integration​

Access canvas features via:

  • Command palette: Open designs, create new ones
  • Context menus: Right-click files to open in canvas
  • Keyboard shortcuts: Quick access to common actions

File Watching​

The extension watches design JSON files:

  • Opens canvas when you create a design
  • Refreshes canvas when JSON changes
  • Closes canvas when you close the file

Limitations​

No Direct Code Editing​

The canvas edits design JSON, not code directly. To modify generated code:

  1. Edit in the canvas (updates design JSON)
  2. Code regenerates automatically
  3. Or edit code directly (updates design JSON on save)

Requires Design JSON​

The canvas needs a design JSON file to work. You can't use it without:

  • A design JSON file in your project
  • The file being properly formatted
  • The extension being able to access it

Webview Constraints​

Since it runs in a webview:

  • Some browser features may be limited
  • Performance depends on webview implementation
  • Offline functionality may vary

Best Practices​

Use Canvas for Visual Changes​

The canvas is best for:

  • Adjusting layouts
  • Changing colors and styles
  • Modifying content
  • Rearranging components

Use Code Editor for Logic​

For complex changes, edit code directly:

  • Add interactivity
  • Implement business logic
  • Integrate with APIs
  • Customize behavior

Keep Design JSON Clean​

Since the canvas reads from design JSON:

  • Don't manually edit JSON while canvas is open
  • Let the canvas manage JSON structure
  • Use Git to track changes

Troubleshooting​

Canvas Won't Open​

  • Check that the extension is installed and enabled
  • Verify you have a design JSON file
  • Try reloading the window (⌘+R / Ctrl+R)

Changes Not Syncing​

  • Check that design JSON file is being saved
  • Verify MCP server is running
  • Look for errors in the Output panel

Canvas Looks Different from Browser​

  • Canvas is a preview, not the final render
  • Your actual code is what runs in the browser
  • Check that code generation completed successfully

What's Next?​

Now that you understand the web canvas, explore: