JET Interface Overview
Ready to go from zero to published in under 15 minutes? This guide walks you through creating, customizing, and launching your first JET website step-by-step.
Before You Begin
You'll Need:
A JET account (connect your Solana wallet)
A rough idea of what you want to build
Optional: Your logo, brand colors, and any images
You Don't Need:
Coding experience
Design skills
Hosting setup
Database knowledge
Step 1: Create Your Project
Click "Create New Project" in your JET dashboard.
Fill in:
Project Name: What you'll call this site internally (e.g., "My Portfolio")
Short Description: One sentence about the site's purpose
Domain Option: Choose "Demo Preview" for testing or "Custom Domain" if you're ready to publish
Hit "Start Building" to enter the JET interface.
Step 2: Choose Your Starting Point
JET offers two paths:
Start from Scratch Best if you have a clear vision and want full control from the beginning.
Pick a Template Browse pre-built starting points:
Landing Page (SaaS, Product, Service)
Portfolio (Creative, Developer, Agency)
Blog (Personal, Company, Magazine)
E-commerce (Product Store, Digital Downloads)
Dashboard (Admin Panel, Analytics)
Templates give you a professional foundation that you can customize completely.
Step 3: Provide Your Seed Prompt
This is where the magic happens. Describe your website in natural language.
Landing Page Example:
"Create a landing page for NexGen Solar, a residential solar panel installer. Include a hero section with a cost calculator, a benefits section explaining savings and environmental impact, customer testimonials, and a contact form. Use green and blue colors to feel eco-friendly and trustworthy."
E-commerce Example:
"Build a product page for handmade ceramic mugs. Show product images in a gallery, price and add-to-cart button, description of the craftsmanship, customer reviews, and related products. Style it minimalist and elegant."
Blog Example:
"Create a tech blog homepage with a featured article at the top, a grid of recent posts with thumbnails and excerpts, sidebar with categories and popular posts, and newsletter signup in the footer."
Hit "Generate" and JET will build your complete website in 30-60 seconds.
Step 4: Review Your Initial Preview
Your website appears in the right-hand preview pane. You can:
Scroll through the page — See every section JET created
Click interactive elements — Test buttons, forms, and links
Toggle device views — Switch between desktop, tablet, and mobile
Inspect elements — Click any component to see details
This is a fully functional preview—forms work, buttons respond, everything is live.
Step 5: Refine Through Chat
Now the real vibe coding begins. Use the left-hand chat to make changes:
Change Copy:
"Change the headline to 'Solar Power Made Simple'"
Adjust Styling:
"Make the hero background image darker so the text stands out more"
Add Functionality:
"Add a FAQ section below the testimonials with 5 common questions about solar installation"
Modify Layout:
"Move the contact form to the sidebar and make it sticky when scrolling"
Each prompt updates your site instantly. You'll see changes in real-time in the preview pane.
Step 6: Test Everything
Before publishing, thoroughly test your site:
Forms: Fill out your contact/signup forms and verify submissions save to your database (check the "Database" tab in JET).
Responsiveness: Toggle mobile view and check that everything looks good on smaller screens.
Links: Click all navigation and CTA buttons to ensure they go to the right places.
Content: Read through all copy for typos and clarity.
Images: Replace any placeholder images with your actual assets by saying: "Replace the hero image with [upload image]"
Step 7: Publish Your Site
When you're happy with everything:
Click the "Publish" button in the top toolbar
Choose your publishing option:
Staging Link: Get a temporary JET URL for sharing and QA
Custom Domain: Connect your own domain name
Review the deployment checklist
Hit "Deploy Now"
Your site goes live in seconds. JET handles hosting, SSL certificates, and CDN configuration automatically.
Your Published Site Includes:
Frontend website (all pages and components)
Backend APIs (for forms, databases, etc.)
Database (with your schema and test data)
SSL certificate (secure HTTPS)
Global CDN (fast loading worldwide)
Common Prompts for First-Time Builders
Starting Out:
"Create a simple one-page portfolio site"
"Build me a landing page for a mobile app"
"Make a blog with a homepage and article template"
Adding Sections:
"Add a pricing table with three tiers"
"Insert a team section with photos and bios"
"Create a gallery showcasing my work"
Styling Changes:
"Make the fonts more modern"
"Use my brand colors:
#FF6B6Bfor primary,#4ECDC4for accent""Add subtle animations when scrolling"
Functionality:
"Connect this form to send me emails"
"Add a payment checkout for $49"
"Create a login system for members"
Troubleshooting Quick Fixes
"The image isn't showing" → Upload your image through the chat: "Use this image for the hero [upload]"
"The form isn't submitting" → Check Database tab to ensure the schema was created. Say: "Reconnect the contact form to the database"
"Colors don't match my brand" → Be specific: "Change all blue elements to #3498db and all buttons to #e74c3c"
"Mobile layout looks off" → "Fix the mobile layout for the pricing section so cards stack vertically"
Your First Website Checklist
Before calling it done:
✓ All placeholder text replaced with real content ✓ Placeholder images swapped for actual photos ✓ Forms tested and connected to database ✓ Mobile view checked on all sections ✓ Navigation links working correctly ✓ Contact information accurate ✓ SEO title and description added ✓ Favicon uploaded
Congratulations! You've just built and published a professional website without writing a single line of code.
👉 Next: Learn to master the JET Interface →
JET Interface Overview
The JET interface is designed around one core idea: chat on the left, results on the right. This guided tour will help you master every control and become a power user.
The Two-Column Layout
Left Column: AI Composer & Controls (30% width) Your command center for building and editing.
Right Column: Live Preview (70% width) Real-time rendering of your website as you work.
This split-screen design keeps you focused—describe what you want, see it happen instantly, no context switching.
Left Column Deep Dive
Chat Composer (Primary Input) The large text input at the bottom where you type your prompts. Supports multi-line input (Shift+Enter for new line, Enter to send).
Prompt History Scroll up to see all previous messages and JET's responses. Click any previous prompt to re-use it or modify it.
Suggested Prompts Quick-action buttons that appear contextually:
When you first start: "Add a hero section" "Create navigation"
After adding sections: "Change colors" "Add animation"
When forms exist: "Connect to database" "Add validation"
Component Picker Click the component icon (grid) to browse the full library:
Filter by category (Hero, Features, Forms, Commerce, etc.)
Search by name or function
Preview components before inserting
Drag-and-drop or click to add to your page
Version History Icon Access automatic snapshots and manually saved versions. Roll back to any previous state with one click.
Top Toolbar
Project Name (Left) Click to rename or access project settings.
Device Preview Toggles (Center)
Desktop (1920px)
Laptop (1440px)
Tablet (768px)
Mobile (375px)
One-click switching to see how your site looks on different devices.
Undo / Redo (Center-Right) Step backward and forward through your edit history.
Publish Button (Right) When you're ready to go live. Shows "Draft" status until first publish, then shows "Published" with timestamp of last deployment.
Right Column: Live Preview
Interactive Canvas This isn't a static mockup—it's a fully functional version of your website:
Forms accept input and submit
Buttons trigger actions
Navigation works
Hover effects active
Scrolling behaves naturally
Element Inspector Click any element in the preview to:
See its component type and properties
Send quick-edit prompts ("Make this bigger")
Access inline editing for text
View responsive behavior
Inline Edit Mode Double-click text elements to edit directly in the preview. Changes sync back to the AI Composer automatically.
Key Controls Explained
"Apply" vs "Preview Changes"
When JET generates a response to your prompt:
Preview Changes: See the update without committing (you can undo)
Apply: Permanently apply the changes (creates a snapshot)
Component Picker Usage:
Click the grid icon in the left column
Browse or search for components
Click a component to see a larger preview
Click "Insert" to add it to your page
Tell JET where to put it: "Add this hero at the top" or "Insert below the features section"
Quick Prompts: Hover over any section in the preview to see contextual quick prompts:
"Edit this section"
"Duplicate"
"Delete"
"Move up/down"
Inspector & Inline Editing
Select an Element: Click any component, section, or element in the preview. You'll see:
Component name (e.g., "Hero - Modern")
Properties (title, subtitle, button text, etc.)
Styling (colors, fonts, spacing)
Responsive settings (how it behaves on mobile)
Direct Prompt Shortcut: With an element selected, type in the chat and JET will automatically apply your prompt to that specific element.
Example: Click a CTA button → Type "Make this green and change the text to 'Start Free Trial'" → JET updates only that button.
Device Preview & Testing
Device Toggles: Use the toolbar to switch views:
Desktop: 1920px - Default editing view
Laptop: 1440px - Most common screen size
Tablet: 768px - iPad and similar
Mobile: 375px - iPhone and Android phones
Test Mode Features:
Network throttling: Simulate 3G/4G to test loading speeds
Test data generator: Fill forms with dummy data
Responsive breakpoint lines: See exactly where layouts shift
Keyboard Shortcuts
Speed up your workflow with these shortcuts:
Cmd/Ctrl + Enter: Send prompt
Cmd/Ctrl + Z: Undo last change
Cmd/Ctrl + Shift + Z: Redo
Cmd/Ctrl + K: Open component picker
Cmd/Ctrl + /: Focus chat input
Cmd/Ctrl + S: Save snapshot
Cmd/Ctrl + P: Publish
1, 2, 3, 4: Switch device previews
Efficiency Tips
Copy Component Variants: Found a component style you like? Right-click and "Copy Style" to apply it to other components.
Bulk Edits: Select multiple elements (Shift+Click) and apply changes to all at once: "Make all these buttons rounded"
Voice-to-Text: Use your browser's voice input for longer prompts (great for descriptive content).
Pin Common Components: Star your favorite components in the picker to access them faster.
Visual Guide to the Interface
Master the interface, master JET. The more you use these controls, the faster you'll build.
Last updated