In-Browser HTML/CSS Visual Editor

Selected: <none>

Element Management

Type to Add

Load a file to start editing.

Classes (Tailwind)

Inner Content / Text / Value

Display

Width

Height

Position

Position Type

Top

Left

Bottom

Right

Z-Index

Colors

Background Color

Text Color

Overflow & Box Model

Overflow (X/Y)

Box Sizing

Flex/Grid Layout

Direction

Justify Content

Grid Properties (if Display: grid)

Template Columns

Gap

Align Items

Padding (e.g., 5px 10px)

Margin (e.g., 10px auto)

Border (e.g., 1px solid #777) Border Width (px)

Border Radius (px or %) Uniform Radius (px)

Box Shadow

Font Family

Font Size (px)

Font Weight

Text Align

Line Height (e.g., 1.5 or 20px)

Inline Class Toggler (Current Element)

No custom classes defined yet.

Global Stylesheet Editor (Cascading)

Edit full CSS rules here (e.g., h1 { color: red; } or .card { padding: 10px; }). Changes apply to **all** matching elements globally.

No element selected or element is root.

Add New Attribute

DOM Tree View (Click to select any element)

Load a file to view the DOM structure.

DOM Structure Metrics

Total Elements: 0

Max Nesting Depth: 0

Avg Element Depth: 0

Optimization & Style Analysis

Inline Style Count: 0

Bloated Elements (>5 Attrs): 0

Tag Distribution

Load a file to analyze...

Global JavaScript (Scripts consolidated upon save)

Note: All inline <script> tags (without `src`) from the loaded file are merged here. The merged code is saved into a single <script id="designer-js-globals"> tag in the output file.