The Nordcraft editor

The Nordcraft editor is your workspace for building websites and packages. It provides an AI-native, visual environment designed around three distinct modes: Play, Design, and Ship.

Live

Workspace layout

The editor workspace consists of four main areas:

1
Canvas: The central visual workspace where your pages and components render in real time.
2
Bottom bar: The command dock featuring the mode switcher (Play, Design, Ship) and mode-specific tools (such as AI annotation, transform, frames, and publishing controls).
3
Left panel: Context-sensitive panel and activity bar:
- Element tree: The HTML hierarchy of your page or component
- Sidebar categories: Direct buttons for Pages & Routes, Components, Services, Media, Formulas, Actions, Themes, Fonts, Config, Packages, Issues, and History
4
Right panel: Context-sensitive inspector that displays:
- Data panel: Variables, formulas, APIs, and workflows
- Element panel: CSS styles, attributes, and event handlers for selected elements
- AI Assistant: AI chat panel with prompt history and generation controls

The three editor modes

The Nordcraft editor is built around three core modes available in the bottom bar:

1
Play mode (Cmd/Ctrl + P): Explore, interact with your site, and build features through conversational and visual AI prompts. Play mode is the default mode when opening projects.
2
Design mode (Cmd/Ctrl + D): Visually design and manipulate elements, configure styles, set up HTML attributes, and build component logic.
3
Ship mode (Cmd/Ctrl + Shift + S): Inspect file diffs, resolve merge conflicts, and publish changes to your production website.

Left panel

Click the Nordcraft logo in the top left corner to navigate back to project details, organization members, projects or the dashboard.

The HTML element tree appears by default in the left panel when editing a component. Use the dedicated buttons on the left toolbar to switch between individual file categories (such as Pages, Components, Actions, Formulas, and Services), as well as Packages and the Issues panel.

Click on the background of the editor or press Escape to return to the element tree view from any open drawer.

Right panel

The right panel displays different content based on your selection:

Data panel: Displayed by default when no element is selected
Element panel: Appears when an element or component is selected, with tabs for styling, attributes and events

The AI assistant opens in a separate right panel, so you can continue to work whilst interacting with the AI assistant.

Command palette

Press Cmd/Ctrl + K (for file search) or Cmd/Ctrl + Shift + K (for quick actions) to open the command palette from anywhere in the editor. It allows you to quickly search and jump to any project file, create new components or pages, and execute editor commands without using the mouse.

Tip

For a guided tour of the Nordcraft editor, check out the following lesson from the Nordcraft Fundamentals video course.