Edit in chat or code — stay in sync.
Describe changes in the chat prompt or edit the source code directly. Both approaches stay synchronized and every edit updates the live preview in real time.
For non-coders and developers alike
Non-technical users can build entire apps using only the chat prompt. Developers can drop into the code editor whenever they want more control. Both approaches produce the same result: a live, working application.
The editor is not a separate tool. It is the same workspace. Changes made in chat appear in the editor instantly. Changes made in the editor are reflected in the next chat interaction. There is no export step, no copy-paste, and no desync.
Non-technical builders
Use the chat prompt exclusively. Never touch code. The editor is there if you ever want it.
Technical founders
Use chat for scaffolding, then switch to the editor to customize business logic.
Full-stack developers
Use the editor as your primary workspace and let the AI handle boilerplate through chat.
Mixed teams
The PM writes prompts in chat. The developer reviews and refines in the editor. Both see the same live preview.
Two-way sync explained
Chat and code are two views of the same source of truth. Here is how they stay synchronized.
Chat to code
When you submit a prompt in the chat, the AI generates or modifies source files. Those changes appear in the code editor immediately. You can see exactly which files changed and what was added, modified, or removed.
- New files appear in the file tree
- Modified lines are highlighted
- Deleted code is removed cleanly
Code to chat
When you edit code directly, the AI is aware of your changes. Your next prompt takes into account everything you have modified manually. No context is lost between the two modes.
- Manual edits are preserved across prompts
- AI references your latest code state
- No risk of overwriting manual changes
IDE capabilities
A browser-based editor with the features you expect from a desktop IDE.
Syntax highlighting
Full syntax highlighting for JavaScript, TypeScript, JSX, CSS, HTML, SQL, and JSON files.
Search and replace
Find across all project files, replace text, and navigate directly to any file or function.
Integrated terminal
Run commands, install packages, and execute scripts without leaving the editor.
Auto-formatting
Code is automatically formatted on save using Prettier defaults so your project stays consistent.
Autocomplete
Context-aware autocomplete suggests variable names, function signatures, and import paths as you type.
Split view
Open multiple files side by side. Edit a component and its styles simultaneously.
Live preview workflow
See every change the moment it happens. No manual refresh, no deploy step.
Make a change in the chat prompt or code editor
The live preview refreshes automatically within seconds
Test interactions: click buttons, fill forms, navigate pages
If something is not right, make another change and the cycle repeats
Best practices
Tips for getting the most out of the chat-plus-editor workflow.
Use chat for new features, editor for tweaks
Describe major new features in the chat prompt. Use the code editor for small adjustments: changing colors, fixing copy, tweaking layout.
Preview frequently
Keep the live preview open in a split view while you work. You will catch issues early and iterate faster.
Let the AI handle boilerplate
Instead of manually creating new API routes or components, describe what you need in chat. Then refine the generated code in the editor.
Commit before major changes
Use version snapshots before making big edits in the code editor. If something breaks, you can roll back instantly.
Combine chat and code for complex logic
Ask the AI to generate a first draft of complex business logic, then fine-tune the implementation details manually in the editor.
Code and conversation, unified
Whether you prefer prompts or code, TrainedApps keeps everything in sync. Try the editor today.