Component Studio: Building & Editing Components

Component Studio is the full-screen editor for creating and editing individual components. Each component is a self-contained bundle of HTML, CSS, and optionally JavaScript that you can save to your library and insert into any page. Access it from NitroShock → Component Studio.

Layout Overview

Component Studio has three main areas:

• Left sidebar — component metadata, quick actions, import, and settings
• Center panel — code editors and live preview
• Right sidebar — AI chat assistant (when opened)

Left Sidebar

Create Tab

The component metadata form includes:

• Name — display name in your library
• Slug — auto-generated from the name; used as a unique identifier; editable
• Description — shown on library cards
• Category — choose from 38 predefined categories (hero, features, pricing, testimonials, cards, buttons, footer, and more)
• Tags — comma-separated tags for filtering
• Type — section, block, widget, or layout

Quick-start buttons at the bottom of the Create tab:

• AI Extract — paste existing HTML or a plain-English description; AI generates clean component code and places it in the editors
• From Template — start from a community template
• Import JSON — import a previously exported component
• Blank — empty editors, start from scratch

Import Tab

Paste raw JSON in NitroShock component format to import a component. The JSON must include at minimum a name and html field. Optional fields: css, js, category, description.

Settings Tab

• Auto-minify on save — strips whitespace from HTML and CSS when saving
• Validate HTML — checks for malformed markup before saving
• Export as JSON — download the component as a portable JSON file
• Export as Template — export with template variable markers for re-use

Code Editors

The center panel has four tabs:

Preview

A live iframe that renders your component with your Brand Settings colors applied as CSS variables. Switch between Desktop, Tablet, and Mobile viewport sizes using the buttons above the preview. Changes in the code editors reflect immediately.

HTML

The component's markup. Action buttons: Minify, Format, Copy.

CSS

Component-specific styles. These do not affect other pages or components. Same Minify/Format/Copy actions.

JavaScript

Optional JavaScript for interactivity. Output as a <script> tag when the component is inserted into a page.

Saving a Component

1. Enter a Name in the Create tab sidebar.
2. Write or generate your HTML, CSS, and JS.
3. Click Save Local to save to your library.

To share with other NitroShock users, click Share to Library. Shared components are submitted for review before appearing in the public central repository.

Save Local vs. Save As New

• Save / Update — overwrites the existing component in your library
• Save As New — creates a copy, leaving the original unchanged. Use this to fork a component or create a variation.

AI Generation in Component Studio

Two AI paths are available:

• AI Extract modal (via the AI Extract button or header AI button) — paste a description or existing HTML; the AI returns HTML/CSS/JS placed directly into the editors. Credit cost is shown before confirming.
• AI Chat sidebar — iterative back-and-forth conversation for building and refining the component. See AI Chat Assistant.

Common Questions

Is there an undo inside the editors?

Standard Ctrl+Z / Cmd+Z works inside each code editor. The AI Chat sidebar also maintains a separate undo stack for AI-applied code changes.

Can I include external libraries in a component?

Yes. Add <link> or <script src="..."> tags in the HTML editor to load external CSS or JavaScript when the component renders.

What happens if I navigate away with unsaved changes?

Component Studio tracks unsaved changes and shows a confirmation prompt before leaving.

Next Steps

• Use AI chat to iterate on your design — see AI Chat Assistant
• Browse and insert existing components — see Component Library Guide
• Configure brand colors for the preview — see Brand Settings & Themes