Direct Edit

​

How to Use Direct Edit in Trickle

Direct Edit allows you to visually adjust any element on your Trickle-generated page — without writing prompts or using tokens.

It’s the easiest way to fine-tune your site after generation.

This guide explains how Direct Edit works and what types of adjustments you can make.

​

What Is Direct Edit?

Direct Edit is a feature in Trickle that lets you:

• Click on any element (text, image, section, button, etc.)
• Open a side panel with editing controls
• Make instant changes to alignment, spacing, typography, and more
• Save your changes without re-running a prompt or using tokens

Use it when you want to refine your site without regenerating an entire section.

​

When Should I Use Direct Edit?

Use Direct Edit for small, precise adjustments, such as:

• Reducing or increasing font size
• Changing element alignment (left, center, right)
• Adjusting spacing between elements (padding and margin)
• Changing colors for text or backgrounds
• Tweaking layout alignment for better visual balance

It is perfect for the final stage of your build, when your page is 90% complete but still needs polish.

​

How to Use Direct Edit

Follow these steps to start editing:

1. Open your project in Trickle.
2. Toggle Select (bottom left of chat bar).
3. Click on any element in your page preview.
4. The Select and Edit panel will open on the left sidebar.
5. Use the controls to adjust styling:
   • Spacing (padding, margin)
   • Alignment
   • Font settings (text elements)
   • Colors
   • Backgrounds
   • Text content (if applicable)
6. Click Save — your edits are applied immediately.

​

What You Can Adjust in Direct Edit

The Select and Edit panel is contextual — meaning it adapts based on what type of element you select.

​

Common controls include:

​

1. Spacing: Padding and Margin

You can control padding and margin individually for each side (top, bottom, left, right).

Tip: Hold Shift while dragging, or press Shift + Enter when inputting values to apply the same value to all four sides.

• Padding = space inside the element (between content and its border).
• Margin = space outside the element (between it and surrounding elements).

Good spacing improves clarity, readability, and balance.

​

2. Alignment

Alignment settings control how content is positioned within the current element.

Depending on the element type:

• For text, this will control text alignment (left, center, right).
• For sections or layout containers, this controls how child elements are positioned (aligned left, center, right, or distributed).

Proper alignment creates a sense of order and professionalism on your page.

​

3. Font Settings (for text elements)

For text elements (headings, paragraphs, buttons), you can adjust:

• Text content (only for static text)
  • If the text is static (manually written), you can edit it directly in the Text content field.
  • If the text is dynamic (linked to database or variable content), the field will be locked. You will see a notice prompting you to edit it via prompting in chat instead.
  • This ensures dynamic content remains consistent with your data source.
• Font weight: Choose weight (regular, bold, extra bold, etc.)
• Font size: Set precise size (px).

Use these to create clear visual hierarchy and improve legibility.

​

4. Colors

You can adjust:

• Text color
• Background color (optional — transparency supported)

Consistent color use enhances brand identity and visual appeal.

​

5. Contextual Behavior

Not all elements will show all controls:

• Text blocks offer full typography controls.
• Image elements allow spacing/alignment/background adjustments.
• Layout sections offer alignment and spacing.

This ensures the panel remains clean and focused based on what you select.

​

Why Use Direct Edit?

AI-generated layouts are fast, but when it comes to fine-tuning details — font sizing, spacing, alignment — re-writing prompts is inefficient.

Direct Edit saves you time and tokens, and gives you precision where it matters:

• Adjusting a single header
• Tweaking button spacing
• Perfecting text alignment
• Adding breathing room between elements

With Direct Edit, you can achieve that final layer of polish without breaking your creative flow.