Onlook provides flexible deployment options to match your workflow:
Onlook Preview - Instant hosting with automatic SSL certificates
Custom Domains - Connect your own domain for branded URLs
Environment Variables - Manage via .env files in the code editor
Deployment Control - Cancel, restart, and manage deployments
Live Prototypes - Share your work with stakeholders instantly
Publish your project to a live URL in seconds, perfect for sharing prototypes and demos.
How to deploy:
Click the Publish button in the top toolbar
Click Publish my site to start the build process
Your project will be live in 30-60 seconds
Copy your preview URL like https://abc123.onlook.live
When you deploy to Onlook Preview:
Build Process - Your Next.js project is built and optimized for production
SSL Certificate - Automatic HTTPS with SSL certificates included
Live URL - Receive a permanent preview URL you can share immediately
All pages and routes in your project
Static assets (images, fonts, icons)
API routes and server-side functions
Styling and theme configurations
Environment variables from .env.production
.env.production are included in deployments. Make sure to configure production API keys and secrets separately from your development .env file.Track your deployment progress:
Building - Code is being compiled and optimized
Deploying - Built files are being uploaded to hosting
Live - Your site is accessible at the preview URL
Failed - Build errors occurred (check logs for details)
Click the Copy Link button next to your preview URL to share via:
Email to clients or stakeholders
Slack or team chat for quick reviews
Project management tools for feedback
Social media to showcase your work
Connect your own domain for a professional URL that represents your brand.
Professional Branding - Use your company's domain instead of generic URLs
SEO - Search engines favor custom domains for ranking
Trust & Credibility - Clients trust branded URLs more than preview links
Memorable URLs - Easier for users to remember and type
Requirements:
A custom domain purchased from a domain registrar
Pro plan or higher
Access to your domain's DNS settings
Open Domain Settings
- Go to your project's Publishing → Custom Domain
Enter Your Domain
- Type your domain name (e.g., myapp.com or app.mycompany.com)
- Click Add Domain
Configure DNS Records
- Onlook provides DNS records to add:
- CNAME Record for domains
- TXT Record for verification
- Copy these values for the next step
Add Records to Your DNS Provider
- Log into your domain registrar
- Navigate to DNS settings
- Add the records provided by Onlook
- See provider-specific instructions below
Verify Domain
- Return to Onlook
- Click Verify DNS Configuration
- Onlook checks that your DNS records are correct
Wait for Propagation
- DNS changes take 5 minutes to 48 hours to propagate
- Most changes complete within 10-20 minutes
SSL Certificate Issued
- Once DNS is verified, Onlook automatically issues an SSL certificate
- Your site will be live with HTTPS within minutes
Namecheap
Log into namecheap.com
Click Domain List → Select your domain → Manage
Navigate to the Advanced DNS tab
Click Add New Record:
- Type: CName Record
- Host: @ (for root domain) or subdomain name
- Value: url provided by Onlook
- TTL: Automatic
Save changes (takes 5-30 minutes to propagate)
GoDaddy
Log into godaddy.com
Click My Products → Find your domain → DNS
Scroll to DNS Records and click Add:
- Type: CName Record
- Host: @ (for root domain) or subdomain name
- Value: url provided by Onlook
- TTL: Automatic
Save (typically 10-60 minutes to propagate)
Cloudflare
Log into cloudflare.com
Select your domain from the dashboard
Navigate to DNS → Records
Click Add record:
- Type: CName Record
- Host: @ (for root domain) or subdomain name
- Value: url provided by Onlook
- TTL: Automatic
- Proxy status: DNS only (gray cloud)
5. Important: Make sure the cloud icon is gray (DNS only), not orange
Other DNS Providers
For providers not listed:
Log into your domain registrar's control panel
Find "DNS Settings," "DNS Management," or "Name Servers"
Add an A Record with:
- Type: CName Record
- Host: @ (for root domain) or subdomain name
- Value: url provided by Onlook
- TTL: Automatic
Save changes and wait for propagation
Subdomains (like app.mycompany.com) are perfect for separating your application from your marketing site.
CNAME Record for Subdomains:
1. In Onlook, enter your full subdomain (e.g., app.mycompany.com)
2. Copy the CNAME target provided (like abc123.onlook.live)
3. In your DNS provider, add:
- Type: CNAME
- Name: app (just the subdomain part)
- Target: The CNAME provided by Onlook
- TTL: 300 seconds
4. Verify in Onlook - SSL certificate will be issued automatically
Manage sensitive data and configuration using .env files in the code editor.
Environment variables store configuration and secrets outside your code:
API keys and tokens
Database connection strings
Third-party service credentials
Feature flags
Environment-specific settings
Why Separate Development and Production?
Development .env): Test API keys, local database, debug mode enabled
Production .env.production): Real API keys, production database, optimized performance
Using the Code Editor:
Open the Code Editor
Create or edit .env (for development) or .env.production (for production deployments)
Add variables in KEY=value format:
Save the file
Variables are immediately available in sandbox
Redeploy for production variables to take effect
Onlook automatically injects these variables during build and runtime.
Naming conventions:
Use SCREAMING_SNAKE_CASE for variable names
Prefix with service name: STRIPE_, SUPABASE_, OPENAI_
Do I need a Pro plan to deploy?
No! Free plan includes deployments to Onlook Preview URLs. Custom domains require Pro plan or higher.
How many projects can I deploy?
Free: 5 projects | Pro: Unlimited projects
What happens if I cancel my subscription?
Your deployed sites remain live for 30 days after cancellation. After that, they're taken offline but your code remains in your account.
Can I export my code and deploy elsewhere?
Yes! Export your code anytime and deploy to Vercel, Netlify, or any Next.js hosting provider.
Are Onlook URLs permanent?
Yes, Onlook URLs don't expire and always show your latest deployment.
Can I use a domain I already own?
Yes! Use any domain you own by adding the DNS records Onlook provides.
How long does domain setup take?
DNS verification typically takes 5 minutes. Full propagation can take up to 48 hours.
Are SSL certificates included?
Yes! All deployments include free, automatic SSL certificates via Let's Encrypt.
Do SSL certificates renew?
Yes automatically. No action required.
How long do deployments take?
Typical deployment: 30-90 seconds | Large projects: 2-5 minutes
Can I preview before deploying?
Yes! Test everything in your visual canvas or preview tab first, then deploy to production.
Where are sites hosted?
Globally distributed CDN with edge locations worldwide for fast loading anywhere.