Component Studio: Building & Editing Components

Component Studio is the full-screen editor for building components: reusable sections of HTML, CSS and optional JavaScript that you save to your library and drop into any page you build with NitroShock. Open it from NitroShock → Component Studio.

The Screen

• Header - Exit, a button to hide the sidebar, the title, and on the right Save As New, Share to Library, shortcuts to the library, Brand Settings and settings, the AI Assistant icon and Save.
• Left sidebar - Create New, Load Existing and Duplicate, then three tabs: Create, Import and Settings.
• Center - four tabs: Visual, HTML, CSS and JS.
• Right - the AI Assistant chat, when you open it.

Starting a Component

Pick a starting point on the Create tab:

• AI Generate - describe the component and the AI Assistant writes it. See AI Chat Assistant.
• Extract Component - paste a component or page template you already have (for example code from another AI tool) and it is split into the HTML, CSS and JS tabs for you. Set Code Format to HTML Only when the paste is markup alone; the CSS and JS already in the editors are kept. This step does not use AI or credits.
• From Template - start from Gradient Hero, Features Grid, Page Content or Testimonials.
• Import JSON - opens the Import tab (below).
• Blank Component - simple starter code.

Extract, From Template, Import and Blank always start a new component: the next Save creates it rather than overwriting the component that was open. Save that one first if it has changes you want to keep.

Component Details

The Create tab holds the details shown in your library:

• Component Name (required).
• Slug (required) - filled in from the name until you change it. Each slug must be unique; saving a duplicate is refused.
• Description - shown on library cards.
• Category - from the NitroShock category list (Hero Sections, Pricing Tables, Call to Action, General Components and more).
• Component Type - Section, Block, Widget or Layout.

Tags take a comma-separated list. They are saved with the component, shown again when you reopen it, and included when you export it.

Editing

Visual. A live preview using your Brand Settings design style and colours, plus any stylesheets ticked under Site assets, with Desktop, Tablet and Mobile view buttons. Double-click text in the preview to edit it in place; the change is copied into the HTML tab when you click away, and selecting text brings up the text toolbar. Insert SVG adds an SVG from your media library at the cursor. On a site imported with NitroShock, Use site CSS (on by default) previews the component with your site's own stylesheet.

HTML, CSS and JS. Code editors with Format, Copy and Minify (which switches to Beautify to undo it). Ctrl+Z or Cmd+Z undoes typing in each editor. You can load an outside library by adding its <link> or <script src> tag in the HTML.

Saving and Sharing

• Save saves the component to this site's library. Saving again updates it.
• Save As New asks for a name and saves a copy, leaving the original as it was.
• Share to Library saves the component first, then submits it to NitroShock for review; once approved it appears in the NitroShock library, where other NitroShock users can add it.

After the first save of a new component, Save As New and Share to Library appear straight away, and reloading the page reopens the component.

The Settings tab has:

• Auto-minify when saving.
• Validate code before saving (on by default) - checks for unclosed HTML tags, unmatched CSS braces and JavaScript syntax errors, and blocks a save until they are fixed. Untick it to save anyway.
• Auto-save while editing - saves five seconds after your last change, once you have saved the component by hand the first time. The choice is remembered in your browser.
• Export as JSON (a portable file of the component) and Export as Template (a standalone HTML file).

Importing

The Import tab takes component JSON, such as an exported component, and fills in the details and code: name, slug, description, category, type, and the HTML, CSS and JS. Click Import Component. The import becomes a new component; click Save to keep it. Tags are read whether the file lists them as an array or as a comma-separated line. An older file that uses {{placeholder}} fields arrives with those filled in from its default text, so the component is ready to edit.

Using a Component on a Page

Components appear in the page builder's Insert Components panel. When you insert one, its CSS and JavaScript are added to the page's own CSS and JS tabs between START_COMPONENT and END_COMPONENT comments, so you can find and adjust them for that page without changing the saved component.

FAQ

Does Extract Component use credits?

No. It only splits code you paste into the right tabs. The AI features (AI Generate and the AI Assistant) use credits.

Can I undo an AI change?

Yes. The AI Assistant has its own Undo last change button, and Ctrl+Z works for your own typing in each code editor.

Related Documentation

• Component Library Guide
• AI Chat Assistant
• Brand Settings & Themes