Skip to main content

​
Tent Editor Overview

The tent editor is your workspace for creating, editing, and refining your AI-generated landing pages. It combines a chat interface for natural language editing with a live preview and code view.

​
Interface Layout

​
Left Panel: Chat Interface

The chat interface is your primary tool for editing tents: Chat History:
  • All previous conversations and edits
  • Timestamps for each interaction
  • Visual indicators for code changes
  • Ability to reference previous changes
Input Area:
  • Text input for natural language commands
  • Image upload for visual references
  • Send button to submit requests
  • Typing indicators during AI processing

​
Center Panel: Live Preview

Real-time Updates:
  • See changes instantly as you make them
  • Responsive preview for different screen sizes
  • Interactive elements work in preview
  • Form submissions are handled properly
Preview Controls:
  • Device size toggles (mobile, tablet, desktop)
  • Zoom controls for detailed inspection
  • Refresh button to reload preview
  • Full-screen preview option

​
Right Panel: Code View (Optional)

Code Tabs:
  • HTML: Complete HTML structure
  • CSS: Embedded styles and animations
  • JavaScript: Interactive functionality
  • Combined: All-in-one view
Code Features:
  • Syntax highlighting
  • Copy to clipboard
  • Download individual files
  • Direct editing capabilities

​
Chat-Based Editing

​
Making Changes

Simply describe what you want to change: Layout Changes:
  • “Make the hero section taller”
  • “Add more spacing between sections”
  • “Center the content on the page”
Content Updates:
  • “Change the headline to ‘Revolutionary AI Platform’”
  • “Update the pricing to $29/month”
  • “Add a testimonials section”
Styling Modifications:
  • “Change the color scheme to blue and white”
  • “Make the buttons larger and more prominent”
  • “Add a gradient background to the hero”
Functional Changes:
  • “Add a contact form at the bottom”
  • “Include a newsletter signup”
  • “Add social media links”

​
Understanding AI Responses

Code Changes: When AI makes code changes, you’ll see:
  • <tent-code> blocks with specific modifications
  • Clear explanations of what was changed
  • Visual indicators in the chat history
Conversational Responses: For questions or clarifications:
  • Direct answers to your questions
  • Suggestions for improvements
  • Explanations of design decisions

​
Preview Features

​
Device Testing

Test your tent across different devices: Mobile Preview:
  • iPhone and Android screen sizes
  • Touch interaction simulation
  • Mobile-specific layout testing
Tablet Preview:
  • iPad and Android tablet sizes
  • Responsive breakpoint testing
  • Touch and mouse interaction
Desktop Preview:
  • Various screen resolutions
  • Mouse hover effects
  • Keyboard navigation

​
Interactive Elements

Form Testing:
  • Submit test data to forms
  • Verify form validation
  • Test submission handling
Navigation Testing:
  • Click through all links
  • Test smooth scrolling
  • Verify anchor links
Animation Testing:
  • Hover effects and transitions
  • Loading animations
  • Scroll-triggered animations

​
Code View Features

​
HTML Structure

Semantic Elements:
  • Proper HTML5 semantic tags
  • Accessibility attributes
  • SEO-optimized structure
Meta Tags:
  • Title and description
  • Open Graph tags
  • Viewport settings

​
CSS Styling

Modern CSS:
  • Flexbox and Grid layouts
  • CSS custom properties
  • Responsive design patterns
Animations:
  • Smooth transitions
  • Hover effects
  • Scroll animations

​
JavaScript Functionality

Form Handling:
  • Client-side validation
  • AJAX form submission
  • Success/error messaging
Interactive Features:
  • Smooth scrolling
  • Mobile menu toggles
  • Dynamic content updates

​
Best Practices

​
Effective Chat Commands

Be Specific:
  • Instead of: “Make it look better”
  • Try: “Increase the font size of the headline and add more padding around the hero section”
One Change at a Time:
  • Focus on single modifications
  • Avoid complex multi-part requests
  • Build changes incrementally
Use Visual References:
  • Upload images for style inspiration
  • Reference specific sections by name
  • Describe exact positioning or sizing

​
Preview Testing

Test Early and Often:
  • Check mobile responsiveness frequently
  • Test all interactive elements
  • Verify form functionality
Cross-Device Testing:
  • Test on actual devices when possible
  • Use browser developer tools
  • Check different screen orientations

​
Code Management

When to Use Code View:
  • Fine-tuning specific styles
  • Adding custom functionality
  • Debugging layout issues
  • Understanding the generated code
Code Editing Tips:
  • Make small, incremental changes
  • Test changes immediately
  • Keep backups of working versions

​
Troubleshooting

​
Common Issues

Preview Not Updating:
  • Refresh the preview panel
  • Check for JavaScript errors
  • Verify code syntax
Changes Not Applied:
  • Ensure clear, specific instructions
  • Check chat history for errors
  • Try rephrasing your request
Layout Problems:
  • Test on different screen sizes
  • Check CSS for conflicts
  • Use browser developer tools

Next: Editing Tents

Learn advanced techniques for editing and iterating on your tents.