Quick Start
This guide takes you from signing up to publishing your first app. No coding experience required.
1. Get oriented
Sign in at lyna-it.com and you land on the Dashboard.
2. Start your project
Pick the approach that fits.
The fastest way. Click New Project on the dashboard and describe what you want in the AI chat:
"Create a landing page for a SaaS product called CloudSync. Include a hero section with a headline and CTA button, a features grid with 6 feature cards, a pricing section with three tiers, and a footer."
The AI scaffolds the structure, generates components, and shows the result on canvas. Refine from there.
Got an existing Figma design? Import it directly:
- Copy the URL of your Figma file or frame.
- In a new project, paste the URL into the AI chat or use the Figma import tool.
- Lyna converts your Figma layers into React components with Tailwind CSS styling.
You get a production-ready starting point that matches your design. See Figma Import for details.
Pre-built templates for common use cases: SaaS apps, landing pages, portfolios, dashboards, and more.
- Click New Project on the dashboard.
- Browse the template gallery and pick one.
- The template is cloned into your project, ready to customize.
See Templates for the full catalog.
The Explore gallery showcases public projects from the community. Find one you like:
- Open the project page.
- Click Clone.
- A copy lands in your account, ready to modify.
Good way to learn by example.
3. Edit your project
Three ways to make changes. They all stay in sync: edit in one, the others update automatically.
Visual editor
Click any element on the canvas to select it. Use the style panel on the right to adjust layout, spacing, typography, colors, borders, and effects. Drag components to reorder them. Use the block inserter to drop in pre-built sections like hero banners, pricing tables, and testimonial grids.
See Visual Editor and Styles for more.
AI chat modes
Three modes, each for a different stage of your workflow:
| Mode | What it does |
|---|---|
| Plan | Discusses your idea, maps out architecture, creates a step-by-step plan. No code changes. |
| Build | Writes and modifies code directly in your project. The default for getting things done. |
| Ask | Answers questions about your codebase and suggests approaches. Read-only. |
Switch modes with the selector at the top of the chat panel. See Plan Mode, Build Mode, and Ask Mode.
Code editor
Click the code icon in the toolbar to open the Monaco editor. Same engine behind VS Code. Full syntax highlighting, IntelliSense, multi-file tabs, and TypeScript type checking. Changes reflect on the canvas in real time.
See Code Editor for more.
Version control
Every project gets a Git repo automatically. View commit history, create branches, review diffs, revert changes. Connect GitHub to push to a remote and collaborate with others.
See GitHub integration for setup.
4. Add fullstack capabilities
Not limited to frontend. Connect backend services directly from the editor.
5. Deploy and publish
When your app is ready, use the Publish wizard.
Open the publish wizard
Click Publish in the top-right corner of the editor. The wizard walks you through each step.
Security scan
Lyna scans for exposed API keys, insecure configurations, and other common issues. Fix anything flagged before proceeding.
Deploy to Lyna Cloud
Confirm and deploy. Your app gets a shareable URL immediately. No server setup needed.
Connect a custom domain (optional)
On paid plans, connect your own domain. Go to Project Settings > Domains, add your domain, update DNS as instructed. SSL is provisioned automatically.
See Custom Domains for details.
Tip
You can re-publish at any time. Each publish creates a new deployment, and previous versions stay accessible in your project history.