Manual Editing | Sticklight

Edit element properties directly using form-based controls. Manual Editing gives you precise control over content, typography, spacing, colors, and effects without AI interpretation. Manual edits do not consume credits.

For AI-assisted changes where you show what you want on the canvas, see Visual Instruction.

Which Should I Use?

I want to…	Use
Change a specific color, font, or spacing value	Manual Editing
Update text or swap an image	Manual Editing
Move an element to a different position	Visual Instruction
Resize something and have it stay responsive	Visual Instruction
Make changes without spending credits	Manual Editing

Accessing Manual Editing

Click Edit in the top bar, next to Preview. The editing panel replaces the chat area while your live preview stays visible beside it.

How It Works

Open Edit
Select an element in the preview, or find it in the Structure tree
Change its content or properties in the panel
See the result in the preview immediately
Press Save changes to write it into your project, or Discard to throw it away

You can undo and redo changes before saving.

Selecting Elements

Click any element in the preview to select it. The properties panel shows controls for that element type.

The Structure Tree

Switch to the Structure tab to see a tree view of the page. This helps you reach elements that are hard to click in the preview, such as a wrapper behind other content or a container holding multiple items.

What You Can Edit

Depending on the element you select:

Content:

Text content (headings, paragraphs, labels)
Images and image sources
Image alt text

Typography:

Font family
Font size
Font weight
Text alignment
Italic, underline, strikethrough, and overline

Colors:

Text color
Background color

Layout:

Width and height
Display type
Gap between items

Spacing:

Padding (per side, or by horizontal/vertical axis)
Margin (per side, or by horizontal/vertical axis)

Borders and Effects:

Border width, color, and radius
Shadow
Opacity

Images:

Image fit (contain, cover, fill, none, scale down)

Actions:

Delete an element

Responsive Editing

Manual Editing respects the desktop, tablet, or mobile preview you are currently viewing. A style change lands on the matching responsive breakpoint rather than overwriting every screen size.

Repeated Elements

When you select an element that appears multiple times (such as a card rendered once per item in a list), a banner shows how many instances you are editing. Style changes apply to all instances.

Text, image, and alt-text editing is disabled on repeated elements because that content usually comes from data. To change data-driven content, update the data source or use chat.

Limits

Edits supported content and visual properties, not app behavior
Cannot delete the page’s root element
Cannot delete a single item out of a repeated list; select the parent container instead
Structural changes, new sections, logic, and data behavior require chat or the Code tab

Saving and Discarding

Save Changes

Click Save changes to apply your edits to the project. This creates a real code change and a version entry.

Discard

Click Discard to throw away all pending changes and revert to the last saved state.

Undo and Redo

Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo. Press Cmd+Shift+Z or Ctrl+Shift+Z to redo. These work before you save.

Credits

Manual Editing consumes no AI credits. Selecting, changing properties, undoing, redoing, discarding, and saving all go through direct editing with no AI model involved.

If you later ask the AI to build on top of your manual edits, that AI request costs credits like any other.

When to Use Manual Editing

Use Manual Editing when:

You know the exact value you want
The change is copy, color, spacing, typography, or an image
You want a predictable result with no AI interpretation
You prefer not to spend credits

Example: Change a heading to say “Summer Collection,” set it to 48px, centered, blue.

For layout changes, repositioning elements, or changes that need AI interpretation, use Visual Instruction.

FAQ

What is the difference between Manual Editing and Visual Instruction?

Manual Editing applies your changes directly to the code. Visual Instruction sends your canvas interactions to the AI, which interprets your intent and implements it. Manual Editing is free and exact. Visual Instruction uses credits and produces AI-interpreted results.

Can I edit any element?

You can edit any element that appears in the preview. Some elements may have limited properties available depending on their type.

Why can I not edit text on a repeated element?

Repeated elements get their content from data. To change the text, update the data source or ask in chat.

Do my changes persist?

Yes. Once you click Save changes, your edits become part of the project and appear in version history.