The editor

The editor is the main workspace for building your Nordcraft applications and packages. It provides an interface with the tools needed to design, develop and test your projects.

Editor overview

The editor workspace consists of four main sections:

  1. 1
    Canvas: The central workspace where you visually build and interact with your application.
  2. 2
    Bottom bar: Editor controls with testing, previewing and AI assistance
  3. 3
    Left panel: Context-sensitive panel that displays
    • Element tree: A hierarchical view of the element structure of your page or component
    • Project sidebar: Access to project files, resources and settings
    • Packages: Browse, install and manage external packages in your project
    • Issues panel: Identify and resolve project issues
  4. 4
    Right panel: Context-sensitive panel that shows
    • Data panel: Configure logic, interfaces and behavior of pages and components
    • Element panel: Specific settings and configuration of the selected element

Left panel

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

The element tree appears by default in the left panel. Use the icon buttons on the left sidebar to switch between:

Click on the background 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 is selected, with tabs for styling, attributes and events
04/16/2025
Edit article
Help Forum