Style Editor

Arcweave allows you to customize the appearance of the Play Mode interface using custom CSS via the Style Editor.

✅ The Tutorials section includes two tutorials on CSS: Arcweave CSS basics and Visual novel CSS.

Access the Style Editor

To access the Style Editor:

1. Enter Play Mode by clicking the Play Mode button in the project's top menu.
2. Click the Style Editor icon (palette icon) in Play Mode's top bar.

The Style Editor is available to project owners and editors. To close it, click its X button or the palette icon again.

Use the Style Editor

The Style Editor panel provides a dedicated environment for writing and managing your custom CSS:

1. Interface: The editor features CSS syntax highlighting and line numbers for easier code readability and navigation. The panel itself is resizable; you can drag its left edge to adjust the width.
2. Writing CSS: Enter your custom CSS rules in the editor.
3. Real-time Validation: As you type, the editor automatically validates your CSS.
   • If errors are detected, an alert icon and the error count (for example, 2 errors - view details) appear at the bottom of the panel.
   • Clicking the error count displays each error with its line number (e.g., "Line 5: ...").
   • The Save changes button will be disabled until all validation errors are resolved.
4. Live Preview: Valid CSS rules are reflected in the Play Mode window in real-time, allowing you to see the effects of your changes instantly. The preview applies only to your current browser tab; unsaved changes are lost when you reload or leave Play Mode.
5. Saving: Once you are satisfied and there are no validation errors, click the Save changes button to persist your custom styles. Your styles will be applied whenever you or others run this project in Play Mode.

Keyboard Shortcuts

The following keyboard shortcuts are available within the Style Editor:

Shortcut	Action
Tab	Insert 2 spaces at the cursor, or indent the selected lines by 2 spaces
Shift + Tab	Remove 2 spaces from the start of the current or selected lines

Available CSS Selectors

See the Play Mode styling reference for the DOM structure, selectors, layout defaults, CSS variables, media variants, and edit-mode behavior. It includes working examples for both manual editing and AI agents using the REST API or MCP.

For story text, start with .prototype__text .editor .editor-content. For choices, use .prototype__option; these are clickable div elements. Scope rules to the story to avoid changing other application UI.

Example

Here's the built-in preset from the Style Editor. To load it, click apply a preset at the top of the Style Editor panel. This replaces the CSS in the editor; click Save changes to keep it. You can use this as a starting point for your own customizations:

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

.prototype__wrapper {
  padding-top: 0px;
}

.prototype__content {
  display: flex;
  flex: 1;
  flex-flow: row-reverse;
  max-width: 100%;
  padding: 0;
}

.prototype__header {
  display: flex;
  flex-basis: 50%;
}

.prototype__body {
  flex: 1;
  padding: 2rem;
  font-family: 'Lora', serif;
}

.prototype__text .editor .editor-content {
  font-size: 22px;
}

.prototype__media {
  flex-flow: column;
  flex: 1;
}

.prototype__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.prototype__components {
  grid-gap: 0;
  height: 100%;
}

.prototype__components--pushed {
  display: none;
}

.prototype__components.single > .comp {
  background: #1d1f1f;
}

.prototype__option {
  --prototype-option-background: transparent;
  --prototype-option-background-hover: transparent;
  border-radius: 0;
  border: 1px solid #292d2d;
  background: none;
}

@media (max-width: 767px) {
  .prototype__wrapper {
    padding-top: 40px;
  }
  .prototype__content {
    flex-flow: column;
  }
  .prototype__body .editor .editor-content {
    padding: 0 0 40px;
  }
  .prototype__header {
    flex-basis: 0;
  }
}

Target elements

Each displayed element's root has the DOM ID el- followed by its element UUID. Copy the UUID from Properties → Details → Element ID, or use the element ID returned by the REST API or MCP. See Target one element for the mapping and its limits.

/* Replace this UUID with the element's UUID. */
#el-38375689-9e4d-430e-954c-65205eb622fe
  .prototype__text
  .editor
  .editor-content {
  font-family: 'Courier New', monospace;
  font-size: 18px;
}

#el-38375689-9e4d-430e-954c-65205eb622fe .prototype__option {
  --prototype-option-background: darkred;
  --prototype-option-background-hover: #b22222;
}

Browser developer tools can help investigate a rule that does not behave as expected. You do not need browser inspection to construct an element selector from its UUID.

Update styles through the API or MCP

The CSS REST API and MCP CSS tools edit the same custom stylesheet. They replace its complete contents. Reload an already-open Play Mode tab to fetch externally saved changes, or click Play in the editor to open a new tab with fresh settings. Restarting the story does not refresh the stylesheet.

The latest save wins; an old Style Editor tab can overwrite externally saved CSS. Retain unsaved local edits before reloading, then reapply them to the fresh stylesheet before saving.

Follow Save and verify styles to preserve existing rules, keep a rollback copy, and check the result. A successful API/MCP response does not perform the Style Editor's CSS validation or visual verification.