docs: add HTML import/export and margin-auto for 0.14.0

ysamcode · ysamcode · commit fb1eea0755f3 · 2026-04-10T13:56:06.000+02:00
Made-with: Cursor
diff --git a/content/editor/design-controls.mdx b/content/editor/design-controls.mdx
@@ -44,7 +44,7 @@ Set margin and padding using the visual box-model editor. The diagram shows marg
 - **Shift + drag** — Update all sides at once
 - **Alt + drag** — Update opposite sides together (top/bottom or left/right)
 
-Values support px, rem, em, and percentage units.
+Values support px, rem, em, and percentage units. Use the **center block** button in the Spacing section header to set left and right margins to `auto`, horizontally centering the element within its parent.
 
 ## Sizing
 
diff --git a/content/editor/layers.mdx b/content/editor/layers.mdx
@@ -49,6 +49,14 @@ Double-click a layer name in the tree to rename it. Renaming helps you identify
 
 **Lock** — Toggle the lock icon to prevent accidental edits. Locked elements remain visible but cannot be selected or modified until you unlock them.
 
+## HTML Import and Export
+
+You can import HTML into the layer tree or export layers as HTML.
+
+**Import HTML** — Right-click a layer and choose **Import HTML**. Paste or type HTML in the code editor dialog and click **Import**. The HTML is converted to layers and added as children of the selected layer. Supported features include standard HTML tags, Tailwind CSS classes, and inline styles — all converted to Ycode design properties automatically.
+
+**Export as HTML** — Right-click a layer and choose **Export as HTML**. The layer and its children are converted to clean HTML with Tailwind classes. Copy the output to use in other projects or share with developers.
+
 <Callout type="info" title="Tip">
 Use folders in the Layers panel to group related elements. Folders do not affect the DOM; they only organize the tree for easier navigation.
 </Callout>
