Contextual Inline CSS Editor

This Contextual Inline CSS Editor is a powerful prototyping tool that allows users to click on specific UI elements and modify their styles in real-time. Unlike a generic devtools panel, this editor is context-aware: it reads a custom data-props attribute to generate only the relevant controls (color pickers for colors, dropdowns for display properties, etc.) for that specific element. It’s an excellent utility for design systems, website builders, or admin dashboards.

Core Technique

The logic revolves around dynamic DOM generation and style parsing.

1. Attribute Parsing: When an element is clicked, the script reads data-props="color, font-size". It splits this string to determine which editors to build.
2. Computed Styles: The getStyle function uses window.getComputedStyle(el) to fetch the current CSS values, ensuring the editor starts with the correct state, even if styles come from external stylesheets.
3. Dynamic Editors: A configuration object (properties array) maps CSS properties to specific editor functions (e.g., colorPicker, dropdownEditor). This makes the system easily extensible.
4. Positioning: The handleEditorPosition function calculates where to place the popup so it doesn’t overflow the viewport, similar to how tooltips work.

Customization

You can add support for more CSS properties by extending the properties array and creating new editor types if needed.

/* Adding a range slider for border-radius */
const properties = [
  // ... existing props
  {
    property: "border-radius",
    editor: (el, prop) => {
        // Custom logic to create a range input
        const block = commonPropEditor(el, prop, "range");
        // ... set min/max ...
        return block;
    }
  }
];

To enable editing on an element, simply add the data attribute in your HTML:

<button data-props="background-color, color, font-size">Click Me</button>

Tips

1. Copy to Clipboard: The editor includes a “Copy CSS” feature. It grabs the inline style attribute of the element. Note that it currently uses document.execCommand('copy'), which is deprecated but widely supported. For modern apps, consider refactoring to the Clipboard API (navigator.clipboard.writeText).

2. Z-Index Management: The editor container has a very high z-index to float above content. Ensure this doesn’t conflict with other modals in your application.