Web Editor
The Skrypt web editor is a browser-based authoring environment for your documentation. Open it from any project page by clicking Editor in the sidebar.
Layout
The editor uses a three-pane layout:
| Pane | Width | Description |
|---|---|---|
| File tree | Fixed (left) | Browse, create, and delete documentation pages |
| Code editor | Flexible (center) | Monaco-based editor with MDX syntax highlighting |
| Live preview | Flexible (right) | Rendered preview that updates as you type |
The file tree panel lists every .md and .mdx file in your project. Click a file to open it. The current file path and unsaved-changes indicator appear in the header toolbar.
Creating and editing pages
New file
Click the + button at the top of the file tree. Enter a file path (e.g. guides/authentication.mdx) and the editor creates it with starter frontmatter and a heading scaffold.
New Page Wizard
For structured pages, click New Page at the bottom of the file tree. The wizard lets you pick a template, set the title and description, and choose where the file lives in your navigation hierarchy.
Editing
The center pane is a full Monaco editor configured for documentation:
- Dark theme (
vs-dark) - JetBrains Mono / Menlo font at 14px
- Word wrap enabled
- Bracket pair colorization
- MDX token highlighting for JSX components inside Markdown
Deleting files
Right-click a file in the tree and select Delete, or use the trash icon. A confirmation dialog prevents accidental deletion.
MDX components
Insert rich components directly into your Markdown. The editor supports these built-in components:
| Component | Description |
|---|---|
<Callout> | Info, warning, tip, or error callout box |
<Card> | Content card with title and optional icon |
<CardGroup> | Grid layout for multiple cards |
<Tabs> / <Tab> | Tabbed content sections |
<CodeGroup> | Tabbed code examples with language labels |
<Steps> / <Step> | Numbered step-by-step instructions |
<Accordion> | Collapsible content section |
<Video> | Embedded video player |
Component palette
Click the Components button in the toolbar (or look for the puzzle icon) to open the component palette. It slides in as a right-side panel with four categories:
- Layout -- Callout, Card, CardGroup, Tabs
- Code -- CodeGroup, CodeBlock
- Media -- Image, Video
- Interactive -- Accordion, Steps
Search by name or description using the filter field at the top. Click any component to insert its snippet at the current cursor position.
Slash commands
Type / at the start of a line or after a space to open the slash command menu. It supports 10 commands:
| Command | Inserts |
|---|---|
/callout | Callout block |
/codeblock | Fenced code block |
/image | Image with alt text |
/tabs | Tabbed content group |
/steps | Step-by-step guide |
/card | Content card |
/accordion | Collapsible section |
/heading | h2 section heading |
/divider | Horizontal rule |
/table | Markdown table |
Navigate with arrow keys, select with Tab or Enter, dismiss with Escape. Slash commands do not trigger inside fenced code blocks.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Cmd+S (Ctrl+S) | Save current file |
The Save button in the toolbar also shows a Cmd+S hint. Unsaved changes are indicated by an orange dot next to the file path in the header.
Snippet manager
The snippet manager stores reusable content blocks per project. Open it from the editor toolbar.
- Create a snippet with a name, language tag, and content body
- Search snippets by name
- Insert a snippet into the editor at the cursor position
- Copy a snippet to your clipboard
- Edit or Delete existing snippets
Supported languages: mdx, typescript, javascript, python, bash, json, yaml, css, html, go, rust.
Saving and deploying
Save your changes with Cmd+S or the Save button. Once saved, click Deploy in the toolbar to publish. The Deploy button is disabled while you have unsaved changes, so save first.
A status banner appears at the top of the editor showing deployment progress, success (with the live URL), or error details.
What's next
- Deploying, publish your docs site to a live URL
- Custom Domains, use your own domain for your docs
- Quickstart, get started with Skrypt from scratch