Welcome to the Butternut Inline Editor! This powerful tool allows you to edit any element on your website by simply clicking on it. This guide walks through every feature available in the inline editing toolbar.Documentation Index
Fetch the complete documentation index at: https://docs.butternut.ai/llms.txt
Use this file to discover all available pages before exploring further.
Table of contents
- Getting Started
- Main Toolbar Overview
- AI Inline Input
- Text Content Editor
- Style Editor
- Text Highlighting
- Layout Editor
- Effects Editor
- Link Editor
- Creating New Links
- Image Editor
- Advanced Features
- Saving Your Changes
Getting started
How to activate the inline editor
- Navigate to any page in edit mode.
- Click on any element you want to edit (text, button, image, etc.).
- A floating toolbar will appear above or below the selected element.
- The element will be outlined to show it’s selected.
Understanding the toolbar
The toolbar appears as a set of icon buttons. Hover over an icon to see its name and what it does.Main toolbar overview
When you select an element, the toolbar includes three areas.Quick actions (left)
- AI Input: Ask AI to modify the element.
- Edit Text: Change the element’s text content.
- Edit Style: Modify fonts, colors, and text styling.
- Highlight: Highlight selected text (only appears when text is selected).
- Layout: Adjust spacing and borders.
- Effects: Add shadows and transforms.
- Code Editor: Edit raw HTML/CSS.
- Price: Edit pricing (for price elements).
- Link: Edit or create links.
- Image: Edit images.
Element actions (middle)
- Bold / Italic / Underline: Format selected text.
- Duplicate: Copy the element.
- Copy Style: Copy the element’s styling.
- Paste Style: Apply copied styling to another element.
Element management (right)
- Delete: Remove the element.
- Close: Deselect the element.
AI inline input
What it does
The AI inline input lets you describe changes, and AI will modify the selected element automatically.How to use
- Select an element.
- Find the AI input box on the left side of the toolbar.
- Type what you want to change (for example: “Make this text larger and blue”, “Make this button green”).
- Press Enter (or click the AI action).
- AI applies the requested changes.
Tips
- Be specific and use simple, clear language.
- You can describe colors, sizes, spacing, and content changes.
- If you don’t like the result, undo and try again.
Text content editor
Accessing the text editor
Click the pencil icon (Edit Text) in the toolbar.Editing text
- A popup opens with a text area.
- The current text is shown.
- Type or paste your new content.
- Changes apply as you type.
What you can do
- Change text content
- Add or remove text
- Write multiple lines
- Paste text from other sources
Tips
- The text area shows only the text (no HTML tags).
- Formatting (bold, colors, etc.) is preserved.
- Click outside the popup to close and keep changes.
Style editor
Accessing the style editor
Click the Aa icon (Edit Style) in the toolbar.Font size
Common options include:- Body (16px)
- Small (14px)
- Large (18px)
- Heading 1 (32px)
- Heading 2 (24px)
- Heading 3 (20px)
- Find Font size.
- Open the dropdown.
- Select a size to apply instantly.
Font weight
Common options include:- Light (300)
- Normal (400)
- Medium (500)
- Bold (700)
- Find Font weight.
- Select a weight to apply instantly.
Font family
- Find Font family.
- Browse fonts (each shows a preview).
- Click a font to apply it immediately.
Text case (transform)
Options typically include:- UPPERCASE
- lowercase
- Capitalize Each Word
- Normal
Text decoration
Options include:- Underline
- Strikethrough
Text color
- Find Text color.
- Choose a theme color circle, or open the color picker for a custom color.
- Theme colors keep your design consistent.
- Custom colors provide more flexibility.
Background color
- Find Background.
- Choose a theme color or use the custom picker.
- Emphasize important text
- Create button-like emphasis
- Improve readability with contrast
Text alignment
Use the alignment buttons for:- Left
- Center
- Right
Text highlighting
When it appears
Highlighting appears when you select text inside a text element.How to use
- Click a text element.
- Drag to select specific words or phrases.
- Open Highlight from the toolbar.
Features
Text color highlighting
- Select text.
- Under Text color, choose a color.
- The selected text updates instantly.
Background highlighting
- Select text.
- Under Background, choose a color.
- The selected text gets a colored background.
Tips
- Use highlights sparingly for emphasis.
- Prefer theme colors for consistency.
Layout editor
Accessing the layout editor
Click the layout icon in the toolbar.What it controls
- Margin (space outside the element)
- Padding (space inside the element)
- Border radius (rounded corners)
Margin controls
Simple mode (default)
- Vertical (Top & Bottom)
- Horizontal (Left & Right)
Individual mode
Switch to Individual mode to set:- Top
- Right
- Bottom
- Left
- Values update in real time.
- Negative values can create overlaps.
Padding controls
Padding uses the same Simple and Individual controls as margin. Common uses:- Add breathing room inside buttons
- Create space around text in boxes
- Increase clickable area for links/buttons
Border radius
- Find Border radius.
- Enter a value (pixels).
- 0: square corners
- 5–10: lightly rounded
- 15–20: very rounded
- 50+: circular for square elements
Effects editor
Accessing effects
Click the sparkles icon (Effects) in the toolbar.Transform effects
Rotate
- Range: -180° to +180°
- Use for subtle tilts or dynamic emphasis
Scale
- Range: 0.1× to 3×
- 1.0× is the original size
Skew X
- Range: -45° to +45°
- Use for modern slanted/perspective effects
Shadow effects
Shadow presets
Choose from presets such as:- None
- Small
- Medium
- Large
- Extra Large
- Inner
Custom shadow controls
Adjust:- Offset X (left/right)
- Offset Y (up/down)
- Blur (softness)
- Spread (expansion)
Reset all effects
Use Reset All Effects to clear transforms and shadows.Tips
- Subtle shadows and transforms look more professional.
- Test effects on mobile and smaller screens.
Link editor
When to use
The link editor is used when you select an existing link (anchor tag) or a button element.Accessing the link editor
- Click a link or button.
- Click the link icon in the toolbar.
Link types
External URL
- Choose External URL.
- Enter the full URL including
https://(for example:https://www.example.com).
Page links
- Choose Select page from your website.
- Pick a page from the list (it updates automatically if page URLs change).
Section links (scroll to section)
- Choose Select section from this page.
- Pick a section number to scroll to.
Email address
- Choose Email address.
- Enter the email (for example:
hello@example.com).mailto:is added automatically.
Phone number
- Choose Phone number.
- Enter the number (include country code for international numbers).
Link settings: open in
Choose whether the link opens in:- Same window (recommended for internal navigation)
- New window (recommended for external links)
Payment integration
For pricing buttons, you may see an Integrate payment option to configure payment processing.Removing links
- Select the linked element.
- Open the link editor.
- Click Remove link.
Creating new links
Use this to turn normal text or elements into clickable links.Access
- Select a non-link element.
- Click the link icon (or link icon with plus, depending on context).
Method 1: Convert entire element
- Select the element.
- Choose the link type (URL, page, section, email, phone).
- Enter the destination.
- Click Save.
Method 2: Link selected text only
- Select a text element.
- Highlight the words you want linked.
- Create a link and click Save.
Tips
- Use descriptive link text (avoid “click here”).
- Test links after creating them.
Image editor
When it appears
The image editor appears when you select:- An image element, or
- An element with a background image
Accessing the image editor
- Click an image.
- Click the image icon in the toolbar.
Common options
- Replace image
- Adjust size
- Edit alt text (accessibility)
- Change image URL
- Upload a new image
Background images
Depending on the element, you may be able to:- Change/remove the background image
- Adjust positioning
- Modify size/cover settings
Replace an image
- Open the image editor.
- Click Upload (or Choose file).
- Select an image file.
- The new image uploads and replaces the old one.
Tips
- Use high-quality images with reasonable file sizes.
- Add descriptive alt text.
- Keep styles consistent across images.
Advanced features
Copy and paste styles
Copy Style- Select an element with styling you want.
- Click Copy Style.
- Select a different element.
- Click Paste Style.
- Colors (text/background)
- Font settings (family/size/weight)
- Spacing (margin/padding)
- Borders and border radius
- Shadows and effects
- Alignment and decoration
Text formatting (selected text only)
When you highlight text inside an element, you can apply:- Bold
- Italic
- Underline
Duplicate element
- Select an element.
- Click Duplicate.
- A copy appears right after the original.
Delete element
- Select an element.
- Click Delete.
- Confirm the deletion.
Code editor
Use the code editor for advanced HTML/CSS changes. Caution:- Incorrect code can break your page.
- Only use it if you’re comfortable with HTML/CSS and test changes carefully.
Saving your changes
Understanding the save system
Inline edits are not always saved automatically. After making changes, a save bar may appear at the bottom of the screen.Save actions
Discard
- Discards your unsaved edits and reverts the page back.
Save
- Saves changes to a draft (not live yet).
Save & Publish / Publish Page
- Saves and publishes changes so they go live immediately.
Recommended workflow
- Make edits across multiple elements.
- Click Save to keep work as a draft.
- When everything looks right, click Publish Page.
Before you publish
- Preview on desktop and mobile
- Test links
- Review text for typos
- Confirm images loaded correctly
Troubleshooting
Toolbar not appearing
- The element may not be editable.
- Another element may already be selected — click outside and try again.
- Refresh the page and retry.
Changes not showing
- Make sure you clicked Save or Publish.
- Hard refresh the page (Cmd+Shift+R).
- Confirm you’re viewing the correct mode (preview vs live).
Styling looks wrong
- Remove custom styles and reapply gradually.
- Use Reset All Effects.
- Discard changes and try again.
Link not working
- Confirm external URLs include
https://. - Verify page links point to existing pages.
- Double-check email/phone formatting.
Best practices summary
Do
- Save frequently while you work.
- Use copy/paste style to keep design consistent.
- Stick to theme colors where possible.
- Preview and test before publishing.
- Use descriptive alt text and link text.
Don’t
- Overuse effects and heavy shadows.
- Mix too many fonts/colors on one page.
- Publish without previewing and testing.
Quick reference
Most common tasks
Change text- Click element → Edit Text → type new text
- Click element → Edit Style → Text color → pick a color
- Click element → Layout → adjust margin/padding
- Click element → Link → choose type → set destination → Save
- Click element → Effects → choose a shadow preset
- Click source element → Copy Style
- Click target element → Paste Style
- Click element → Delete → confirm
Need more help?
- Use Help in the sidebar for support.
- Use ChatAI for quick editing questions.
- Check Tutorial for guided walkthroughs.
Version: 2.0