The Nordcraft editor

The Nordcraft editor is your main workspace for building Nordcraft websites and packages. It provides all the tools you need to design, build and test your projects.

Live

The editor workspace consists of four main areas:

1
Canvas: A resizable workspace where you build and interact with your website
2
Bottom bar: Undo/redo changes, configure CSS variables, preview your project and open the AI assistant
3
Left panel: Context-sensitive panel that displays
- Element tree: A view of the HTML element structure of your page or component
- Project sidebar: Access project files, project formulas, services, resources and settings
- Packages: Browse, install and manage external packages in your project
- Issues panel: Find and resolve project issues
4
Right panel: Context-sensitive panel that displays
- Data panel: Create variables, formulas and workflows, and connect to APIs
- Element panel: Configure CSS styles, add HTML attributes, and trigger events for HTML elements, plus configure component attributes and the repeat and show/hide formulas

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. Use the icon buttons on the left sidebar to switch between:

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

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.

Tip

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