---
title: The Nordcraft editor
description: Understand the four main sections of Nordcraft's editor interface - the canvas, bottom bar, left panel and right panel.
---

# 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.

![The Nordcraft editor, showing a full HTML element tree of HTML elements and components, and a card component on the canvas. The image is annotated with numbers that relate to the lists items below.|16/9](editor-overview.webp 'Editor overview'){https://editor.nordcraft.com/projects/docs_examples/branches/main/components/screenshot-page?canvas-width=800&canvas-height=800&rightpanel=events}

The editor workspace consists of four main areas:

1. [Canvas](/the-editor/canvas): A resizable workspace where you build and interact with your website
2. [Bottom bar](/the-editor/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](/the-editor/element-tree): A view of the HTML element structure of your page or component
   - [Project sidebar](/the-editor/project-sidebar): Access project files, project formulas, services, resources and settings
   - [Packages](/the-editor/packages): Browse, install and manage external packages in your project
   - [Issues panel](/the-editor/issues-panel): Find and resolve project issues
4. **Right panel**: Context-sensitive panel that displays
   - [Data panel](/the-editor/data-panel): Create variables, formulas and workflows, and connect to APIs
   - [Element panel](/the-editor/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](/the-editor/element-tree) appears by default in the left panel. Use the icon buttons on the left sidebar to switch between:

- [Project sidebar](/the-editor/project-sidebar)
- [Packages](/the-editor/packages)
- [Issues panel](/the-editor/issues-panel)

Click on the background of the editor or press [kbd]Escape[kbd] 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](/the-editor/data-panel): Displayed by default when no element is selected
- [Element panel](/the-editor/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](https://nordcraft.com/learn/fundamentals) video course.
:::

@@@ youtube
videoId: rMnUFOF1wJ0
title: Get to know the Nordcraft editor
@@@