SXL Studio
Dev Mode

Editing Vue in Dev Mode

Edit repository .vue files directly in SXL Studio Dev Mode with diff preview, preflight conflict checks, and one-click publish.

Purpose

Use the Code tab in Dev Mode to patch existing .vue files without leaving Figma.

This is a repository-backed editor flow:

  • read from your active Git connection
  • compare local buffer vs remote
  • publish with one commit

Prerequisites

  • Active Git connection in plugin footer (Sync)
  • Code folder set in Dev Mode connection settings
  • Repository connection configured for Code Connect (recommended)

The Dev Mode connection is scoped to source-code editing. It does not synchronize Database or Tokens; those paths are configured from Design Mode sync settings.

Workspace layout

Left side: Vue tree

  • Lazy folder loading from Git
  • Refresh button resets cache and reloads root
  • Only .vue files are clickable for editing
  • Linked files (from Code Connect registry) are marked

Right side: Monaco editor

  • Syntax mode based on file extension (.vue uses HTML grammar)
  • Status bar shows language, line count, and sync state
  • Dirty indicator (Uncommitted) tracks local edits

Save & Publish workflow

Save & Publish performs a preflight-safe publish:

  1. Remote file is re-read (remote peek)
  2. If SHA is unchanged, commit is sent directly
  3. If remote changed, conflict modal opens with diff and explicit actions

Conflict actions:

  • Overwrite remote (force publish against latest SHA)
  • Reload from remote (discard local edits)
  • Cancel

After successful publish:

  • dirty state is cleared
  • latest remote SHA is refreshed
  • baseline updates to current editor content

Default commit message format:

  • [SXL Studio] Update <path>

View diff (without publishing)

View diff opens a read-only Local vs Remote side-by-side diff.

Use it before publish to validate exact changes.

Keyboard shortcut

Inside the editor:

  • Cmd + S (macOS)
  • Ctrl + S (Windows/Linux)

Both trigger the same Save & Publish flow.

Quick Code Connect from editor

Connect links the open .vue file to the selected Figma component/component set.

This is a fast-path binding:

  • creates/updates a vue3 file binding
  • writes to diff-code-connect.<fileKey>.json registry
  • node-level Dev Resource write may require Design Mode (Figma Dev Mode limitation)

Connect is disabled when:

  • no component/component set is selected
  • repository URL is not configured

Safety guards

  • Switching to another file with unsaved edits prompts for confirmation.
  • Saving does not silently overwrite remote changes.
  • Failed save keeps buffer dirty and shows actionable error.

Current scope limits

  • Focused on editing existing repository files from the Vue tree
  • Code-folder-only connections may show "nothing to pull" for data/token sync because this panel is code-only
  • No runtime preview/sandbox in this panel
  • No dedicated "create new file" UI in the Dev editor flow