Select and edit in place
Click an element on the canvas; double-click to edit text, see its settings in the inspector.
Tecof Studio
The visual editor where you own every section, word and style
Studio is where you edit the pages your agents generated, live: drag-and-drop canvas, slot composition, style panel, symbols and TR/EN content on one screen.
How it works
Sections set the layout, elements go into slots
Each section only defines the layout; elements such as headings, paragraphs and buttons go into slots. Content changes without breaking the design.
Drag and drop into slots
Elements drop only into slots that fit; the layout always stays consistent.
Style panel
Color, spacing and typography from the theme palette; breakpoints and hover / active states set separately.
Symbols
Edit shared components like header and footer once; they update on every page.
Capabilities
What is in Studio?
The tools you need to build pages, style them and publish without code.
Canvas & drag and drop
Move, reorder and duplicate sections and elements on the canvas.
Slot composition
Each slot accepts only the element types that fit; the design never breaks.
Inline text editing
Write headings, paragraphs and button labels right on the canvas.
Style panel
Color, spacing, typography; responsive breakpoints and hover / active states.
Symbols
Manage shared components from one place; they update on every page.
TR/EN multilingual
Edit content per language; AI translation fills the missing one.
Page templates
Start from ready page and section templates, then customise.
Draft & publish
Changes stay in a draft; preview and publish when ready.
Flow
Edit, preview, publish
You work without touching the live site; publishing is one click and you can always go back to the draft.
01
Edit
Open the page in Studio; add sections, write text in place, fine-tune in the style panel.
02
Preview
Check desktop, tablet and mobile views; review TR and EN content per language.
03
Publish
Publish with one click when ready; the draft keeps working in the background.
Everyday tasks
How everyday tasks get done in Studio
Four core flows, from building a page to publishing in two languages.
- Start from one of the page templates
- Add sections from the component library
- Place elements into slots
- Save the draft and preview
- Colors come from the theme palette
- Spacing, alignment and typography controls
- Breakpoint-based settings
- Hover / active states
- Header and footer are kept as symbols
- One edit, updated on every page
- New pages get the symbols ready-made
- Edit content per language
- AI translation fills the missing language
- Preview per language
- Publish when ready
When you want code
Studio components extend with code
Open the theme code in the Cloud IDE and write new Studio-compatible sections and elements. Generate page drafts programmatically with Developer API v1 and @tecof/mcp.
Cloud IDE code access
Edit theme code from the browser; new sections and elements appear in Studio with their slots.
API v1 & PAT
Read and write page drafts with a personal access token (pages:read / pages:write).
@tecof/mcp
Draft pages from Claude Code, Codex or Gemini CLI; publishing always happens from the panel.
Webhooks & headless
Push events to your own systems; consume content headless.
Developer API v1 · .mcp.json
# GET /api/v1/pages — list draft pages (PAT, scope: pages:read)curl -s "$TECOF_API_URL/api/v1/pages?themeId=$TECOF_THEME_ID" \ -H "Authorization: Bearer $TECOF_API_TOKEN" # .mcp.json — draft pages from Claude Code / Codex / Gemini CLI{ "mcpServers": { "tecof": { "type": "stdio", "command": "npx", "args": ["-y", "@tecof/mcp@latest"] } }}Frequently asked questions
About Studio
If your question is not answered here, reach us through the contact form.
Ready to launch
Open your generated site in Studio today
Start on the Free plan; generate the first version from a prompt, edit it in Studio and publish when you are ready.
Drag and drop · Symbols · TR/EN · Draft & publish