Elements and HTML
Lediv combines three synchronized views for structure and markup: Elements for hierarchy, Element for visual editing of the selected node, and HTML for direct markup editing in code mode.
The context is always one component at a time, the one that contains the selected element, or the current page when no element is selected. The active context is updated in the Elements panel header.
Use Elements for structure work
After creating pages and components, most layout work starts in Elements. The tree and canvas stay in sync, so selection and reordering are reflected immediately in both views.
- Add nodes from Add element using built-in groups and project components.
- Reorder and move nodes with drag and drop in the tree or directly in canvas.
- Use context menu or shortcuts for copy, paste, and delete actions.
Switch to HTML for precise markup edits
When structure needs direct code-level control, switch to Code mode and use the HTML panel. This is useful for fine-grained markup changes, attribute cleanup, and faster edits in dense structures.
HTML edits update Element and canvas immediately. In the same way, structural edits in Element update the HTML source.
Choose the fastest view for each task
Use Elements for hierarchy and drag-and-drop, use Element for visual field-based edits on the selected node, and use HTML for direct markup precision. The workflow stays consistent because all three views operate on the same selected context.
Visual and code styling are covered in Styles and CSS.
Working with component nodes
When a component instance appears in the Elements tree, double-clicking that node opens the component context for internal edits. This keeps structural edits fast without switching to a different workflow.