Editing Nodes
Skrptiq has two editing modes: a sidebar editor for quick changes and an expanded modal for deep work.
Node Editor Sidebar
The sidebar opens when you click any node in the graph or list view. It appears on the right side at 400px width.
Fields
- Type selector — Coloured chip buttons for all seven node types. Click a different chip to change the node’s type — this is non-destructive and takes effect when you save. The content, title, and description are preserved. Each chip matches the node’s colour in the graph.
- Tags — Assign or remove tags from the node. Tags appear as small badges.
- Title — Plain text. This is what appears as the node label in the graph.
- Description — Short summary of what the node does or contains.
- Content — The main body. The editor adapts based on content type detection (see below).
Connections
The sidebar lists all connections involving this node:
- Outgoing (→) — edges from this node to others. Shows the edge type label, the connected node’s type badge, and the node title.
- Incoming (←) — edges from other nodes to this one. Same format.
- Each row has a navigation button that jumps to and selects the connected node in the graph.
Metadata
At the bottom of the sidebar:
- Created date
- Updated date
- Node ID
- Content size (character count) and detected content type
Actions
- Delete (red) — permanently removes the node and all its connections.
- Save (green) — persists changes.
- Close (x) — closes the sidebar. Unsaved changes are discarded.
Expand
A link at the top of the sidebar opens the Expanded Editor Modal.
Expanded Editor Modal
The modal is a full-screen, three-column layout available for all node types.
Left column: Content editor
Same fields as the sidebar (title, description, content) but with more space. For structured content types, a code editor with syntax highlighting replaces the plain textarea.
For workflow nodes, the left column shows:
- Steps — an ordered list of child nodes with position numbers, reorder buttons (up/down), and delete
- Notes — a collapsible markdown editor for workflow documentation
Middle column: Connection Manager
The connection manager lets you add, view, and remove connections directly from the editor:
- Search for nodes by title or description
- Select an edge type from a dropdown (uses, depends on, references, etc.)
- Filter by node type to narrow search results
- For workflow nodes: an “Add Step” button shows only skills and prompts, automatically assigns the next step position, and creates a
usesedge - Existing connections show with direction arrows, type labels, and navigation/delete buttons
Right column: AI panels
Tabbed interface — the available tabs depend on node type:
| Tab | Available for | Purpose |
|---|---|---|
| Analysis | Prompts | Scores the prompt (0–100) on clarity, specificity, structure, and completeness. Shows detected variables with counts. |
| Test | All types | Create test cases, fill variables, run against LLM. Test cases persist in the node’s metadata. |
| Review | All types | AI-generated review with specific suggestions for improvement. |
| Refine | All types | Iterative refinement with AI assistance via chat interface. |
| Flow | Workflows | Pipeline diagram showing steps left-to-right by execution order, with supporting nodes below. |
For full details on AI capabilities, see AI Features.
Slash Commands
Both the markdown editor and code editor support Notion-style / commands for quick insertion of content, references, and formatting.
Type / at the start of a line or after a space to open the command popup. The popup appears at the cursor position and supports:
- Fuzzy search — type to filter commands
- Keyboard navigation — arrow keys to move, Enter to select, Escape to dismiss
- Secondary pickers — some commands open a follow-up picker (e.g. node search, template browser, language selector)
Command categories
| Category | Commands | What they do |
|---|---|---|
| Reference | /skill, /prompt, /workflow, /source, /document, /asset, /service, /repo | Search and insert a [[Node Title]] reference to an existing node |
| Content | /template, /code, /link, /variable, /todo, /date | Insert structured content — templates, fenced code blocks, markdown links, {{VARIABLE}} placeholders, checkboxes, today’s date |
| Formatting | /heading, /bulleted-list, /numbered-list, /quote, /divider, /table | Insert markdown formatting. Heading opens a level picker (H1–H4). |
| Meta | /help | Show available commands and keyboard shortcuts |
Secondary pickers
Some commands open a second-level picker after selection:
- Node references (
/skill,/prompt, etc.) — search popup filtered to that node type - Template — browse templates by type and category, then insert the template content
- Code — pick a language (TypeScript, Python, SQL, etc.) for the fenced code block
- Heading — choose level (H1, H2, H3, H4)
- Link — form for URL and display text
- Variable — form for variable name
- Repo — search linked repositories
A “Type / for commands” hint appears in the editor toolbar/status bar.
Content Type Detection
The editor automatically detects what kind of content you’re working with and adapts the display. Detection runs on the content body and the node title.
| Type | Detection rule | Editor behaviour |
|---|---|---|
| SVG | Starts with <svg or <?xml containing <svg | Renders a visual preview |
| JSON | Valid JSON starting with { or [ | Syntax-highlighted code editor |
| YAML | Starts with openapi: or swagger:, or contains : followed by a newline (without HTML tags) | Syntax-highlighted code editor |
| Code | Title ends with .ts, .js, .py, .tsx, or content starts with export, import, function, const | Syntax-highlighted code editor |
| Markdown | Starts with #, or contains ## or - list items on their own lines | Rich rendered preview |
| Plain text | None of the above match | Standard textarea |
Detection is automatic — you do not need to set the content type manually. The detected type appears in the metadata section of the sidebar as a small label next to the character count.