# Style Editor

Source: https://docs.arcweave.com/project-tools/play-mode/style-editor
Section: Project Tools > Play Mode
Description: Customize Play Mode's appearance using custom CSS

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

![Arcweave's Play Mode screen, with the Style Editor sidebar open on the right, showing a block of CSS code affecting the playthrough's appearance on the left: the option buttons are semi-transparent and the cover image is full screen.](https://docs.arcweave.com/assets/play-style-editor.cx55xf1r.png)

> ✅ The **Tutorials** section includes two tutorials on CSS: [Arcweave CSS basics](https://docs.arcweave.com/tutorials/style-editor/css-basics) and [Visual novel CSS](https://docs.arcweave.com/tutorials/style-editor/css-visual-novel).

## Access the Style Editor

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > 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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > 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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > 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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > Available CSS Selectors

See the [Play Mode styling reference](https://docs.arcweave.com/project-tools/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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > 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:

```css
@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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > 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](https://docs.arcweave.com/project-tools/play-mode/styling-reference#target-one-element) for the mapping and its limits.

```css
/* 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

Context: Arcweave docs > Project Tools > Play Mode > Style Editor > Update styles through the API or MCP

The [CSS REST API](https://docs.arcweave.com/rest-api/css) and [MCP CSS tools](https://docs.arcweave.com/integrations/mcp#style-play-mode) 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](https://docs.arcweave.com/project-tools/play-mode/styling-reference#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.