Editor overview

Editor highlights

Qubyt Studio is a desktop code editor for web development. On this page we summarize the main in-app capabilities as cards. For the full story and release notes, see the Features page.

All features are under active development; improvements and tests continue.

Live Page

HTML preview, Layout Inspector to click an element in the preview and edit CSS, live updates. Multiple CSS, @media, @import support.

Best results for static HTML/CSS projects

Limitation: No line detection for dynamic elements.

Language Switch (i18n)

Turkish / English UI. Switch from the Settings menu or the language indicator in the status bar. Menu, status bar, and panels follow the selected language.

TR/EN language support

Learning Mode

Optional: extra explanations and tips in templates and the Component Gallery; when enabled, learning-focused copy is shown; when disabled, the interface stays clean.

Experimental

Limitation: Content and behavior will be refined with feedback.

Supported Libraries

Completion & snippets

Completion and snippets for Alpine.js, htmx, Lodash, dayjs, Axios, Zustand (vanilla ESM), Chart.js, Bootstrap 5, and Shoelace.

HTML

x-, @, hx- attribute completions; hx-swap and hx-trigger value suggestions; <sl-*> tags and Shoelace attribute completions.

CDN shortcuts Ctrl+Space

alpine alpine:plugins htmx lodash axios zustand zustand:persist zustand:devtools zustand:selector chart chart:date bootstrap bootstrap:css link:bootstrap shoelace shoelace:dark shoelace:bundle dayjs dayjs:locale dayjs:utc dayjs:timezone dayjs:localizedFormat dayjs:customParse dayjs:isBetween

JS / TS

_. or lodash., dayjs., dayjs.extend(, axios., Chart. (capital C, UMD); same dot completions inside inline HTML <script> blocks.

Notes

Qubyt markup/CDN/path suggestions are disabled inside embedded <style> / <script>. Optional LSP: docs/starter-types/qubyt-globals.d.ts. Help menu: "Supported Libraries", "CDN snippets". In the library examples view, concept tables and inline code in the flow are highlighted clearly.

Alpine.js · htmx · Lodash · dayjs · Axios · Zustand · Chart.js · Bootstrap · Shoelace

LSP (Language Server Protocol)

IntelliSense starts automatically when a folder is opened. JS/TS: completion, Go to Definition (Ctrl+Click), Find References, Hover, Rename (F2), Code Actions. HTML, CSS, JSON: completion, diagnostics, hover. Error recovery: automatic restart if the server crashes.

Same language engines as VS Code

Limitation: Cannot go to definitions outside project (node_modules, etc.).

CSS Builder

Generate CSS with Flexbox or Grid. Visual controls for display, flex-direction, justify-content, align-items, gap, etc. Generated CSS preview, Insert CSS to add to editor. Works independently of Live Page and Layout Inspector.

Quick layout creation with Flexbox/Grid

Limitation: Flexbox and Grid properties only; no element selection.

Code Diagram

Mermaid class diagram, extends inheritance arrows, method list. AST parse for visual class relationships. Zoom support.

Class diagram for JavaScript files

Limitation: .js, .mjs, .cjs only; TypeScript not yet supported.

Debug Tools

Add console.log/warn/error/debug for the selected variable, Remove All Logs, Toggle Comments. Find Logs lists every console line in the project.

Turbo Console Log style

Limitation: Only when the editor is focused; Insert Error Ctrl+Alt+E.

Markup & Style Analyzer

HTML: missing alt, class usage. CSS: unused/undefined classes, invalid properties, empty rules. Errors / Warnings / Info grouping. @import supported.

Experimental HTML/CSS quality analysis

Limitation: May have false positives/negatives in some edge cases.

Dev Analytics

Code writing time, streak, language usage, activity heatmap, file activity. Full-screen dashboard. All data local, privacy-focused.

Experimental

Limitation: Long-term testing ongoing; heatmap shows daily total only.

Notes

Project notes in Markdown. .md files under the notes/ folder. Create, list, open, rename, and delete notes.

Markdown Preview

HTML preview for .md files, Mermaid diagrams, relative img path resolution. Live refresh after save.

Limitation: .md files only; custom Markdown extensions are limited.

Theme Creator & Switcher

Per-language color pickers (HTML, CSS, JS, TS), live preview, save custom themes. Apply instantly via the theme switcher; choice persists across sessions.

Component Gallery & Blocks

v1.2.1: components/ onboarding, components.json for cards and folder groups. Starter projects tab: mini project cards, identity/detail flow, notification after creation. Blocks & catalog tab: blocks/, blocks.json, root qubyt-insert-catalog.json for one-click HTML insertion. Qubyt Theme Version 2 palette and gallery typography; library security note box.

v1.2.1 project components and block catalog

Templates

HTML5 Empty, HTML5+CSS+JS, Single page templates. Target folder selection, one-click create.

Snippets

Saved code snippets, add new, edit, delete. Language-based grouping.

Problems

Combined LSP and ESLint diagnostics. Bottom panel Problems and WARNINGS tabs; error/warning grouping; click a row to jump to the line. JS/TS: LSP + ESLint. HTML, CSS, JSON: LSP diagnostics.

Multi-language with LSP + ESLint

Limitation: ESLint is JS/TS only; LSP covers all supported languages.

Project Map

File structure ASCII tree, Import Graph (script, link, import, require), Component Graph (iframe, object, embed). Visualize project dependencies.

File and import relationships

Explorer

File tree, new file/folder, drag-and-drop (move files/folders, drag from Explorer into the editor). With the tree focused, F2 rename, Delete to remove (with confirmation). Context menu, tab integration, close all folders. Root folder name is shown in the title bar.

Limitation: node_modules, .git, .vscode skipped.

Presentation Mode

Full-screen code focus. Activity bar, sidebar, and menu hidden. Font size and line number options. Open with Ctrl+Shift+P, exit with Esc.

Tabs

One tab per open file, unsaved indicator, Ctrl+S to save. Drag and drop tabs to reorder.

arrow_back Return to Home Page All features (full write-up)