Qubyt

Loading content…

Qubyt Studio Editor What Can It Do?

Qubyt Studio v1.2.1

Qubyt Studio is a desktop editor designed for web development. It uses the Monaco editor core; it helps you write HTML, CSS, and JavaScript quickly and comfortably. Below, we walk you through the features from the moment you open the editor, start to finish, like a story.

Learning Mode (experimental)

Learning Mode is an optional experience that shows extra explanations and tips on screens such as templates and the Component Gallery. When it is on, learning-focused text and highlights are visible; when off, the interface stays clean. Behavior and copy will be refined with feedback.

Quick highlights (summary)

Picks from recent development full release notes are updated with each new version number:

  • Explorer: When the last clicked item in the tree has focus, F2 renames and Delete removes (with a confirmation dialog).
  • Templates Starter projects: Separate tab in the Component Gallery; card and identity/detail pages; short notification after creating a mini project.
  • Mini project samples (Todo, Fetch, etc.): Sample code with persistent data, safe network requests, and user-friendly error messages.
  • Library examples catalog: Strong emphasis on inline code (backtick segments) in the concept table on the right and in the flow.

Supported languages

Knowing which languages you can work with is important from the first step. This version supports five languages; the language is selected automatically by file extension:

  • HTML .html, .htm
  • CSS .css
  • JavaScript .js, .mjs, .cjs
  • TypeScript .ts, .tsx
  • Markdown .md, .markdown

Syntax highlighting, completion suggestions, and shortcuts work separately for each language. So no matter which file you're in, the editor greets you in the right mode.

Qubyt Theme and theme customization

When you open the editor, the first thing that catches your eye is the dark-background Qubyt Theme. The theme bundled with v1.2.1 uses the Version 2 palette, aligned with Component Gallery typography. Keywords, variables, strings, HTML tags, CSS properties, and attributes are shown in different colors by language type. Bracket pairs are colored too; matching brackets are highlighted. You can also build your own theme; theme features introduced in v1.0.5 include:

  • Theme Creator: In the full-screen panel opened via the palette icon in the Activity bar, you can change colors for selectors (tag, attribute, text, comment, etc.) for HTML, CSS, JavaScript, and TypeScript to create your own theme. Shared selectors keep HTML tag and CSS selector colors in sync.
  • Theme saving: You can save your theme with a name; themes are stored as JSON under userData/themes/.
  • Theme switcher: Theme selection via the palette icon to the left of the "Run Terminal" button in the top bar. You can choose Qubyt Theme (default) or any saved custom theme.
  • Synchronization: When you select a theme from the switcher, both the editor and the Theme Creator color pickers update automatically.

Coding features

When you open a project and start typing the first line, the editor meets you with many small assists. These save time and let you focus on the logic of your code.

Tags and HTML

  • Auto Close Tag: Typing > adds the closing tag, cursor stays in between.
  • Auto Rename Tag: Changing the opening or closing tag updates the matching tag automatically.
  • Matching tag highlight: When the cursor is on a tag name, the matching open/close tag is highlighted.
  • Wrap with tag: Wrap selected text with a specified tag from the right-click menu.
  • HTML5 template: Typing ! and Tab in an HTML file adds DOCTYPE and html/head/body skeleton.

Brackets and quotes

Brackets and quotes don't leave you alone when writing JavaScript or CSS:

  • Auto-closing brackets and quotes: Typing (, [, {, ", ' adds the matching character, cursor stays in between.
  • Bracket coloring: (), [], {} pairs are shown in different colors; matching brackets are highlighted.

Line operations

Moving, duplicating, or commenting out lines are things you do often. Shortcuts speed these up:

  • Move line: Alt+Up Arrow / Alt+Down Arrow to move the line.
  • Duplicate line: Ctrl+Shift+D duplicates the line or selection below.
  • Line and block comment: Ctrl+/ adds // or /* */ to selected lines, <!-- --> in HTML.
  • Colored comments: Special markers and words in comments are shown in different colors:
    • //! Important (red)
    • //* Note / emphasis (green)
    • //? Question (blue, italic)
    • TODO, FIXME, XXX, HACK Each in a different color (yellow, pink, purple, orange)

Completion and snippets

The Tab key becomes your best friend when typing. Different completion suggestions and snippets kick in for each language:

HTML: Completion suggestions when typing tag names; ready-made snippets with attributes for link, script, meta, form, input, etc. Path suggestions from project files after src=" or href=" (path suggestions inside embedded <style> or <script> are disabled). Emmet: link:css, .container, ul>li*5, div.container>ul>li*5 and similar shortcuts expand with Tab.

CSS: d:f → display: flex;, m0a → margin: 0 auto;, p0, tac, j:c, a:c, w:100, pos:a and similar shortcuts for completion.

JavaScript: Tab adds snippets for for, forin, forof, function/fn, if, ifelse, arrow, try, addEventListener.

TypeScript: Completion and snippet support for type definitions, interface, type, const, function, and other constructs.

Supported libraries

From the Help menu, Supported Libraries documents completion and snippet support for Alpine.js, htmx, Lodash, dayjs, Axios, Zustand (vanilla), Chart.js, Bootstrap 5, and Shoelace. Using these in your project is easier with the editor’s help:

  • Alpine.js: Completion for x-data, x-show, @click, etc. CDN and plugin (Persist, Collapse) snippets. In HTML, type x- or @; alpine or alpine:plugins + Ctrl+Space for CDN.
  • htmx: hx-get, hx-post, hx-swap, hx-trigger, hx-target completion. Value suggestions inside hx-swap=" (innerHTML, outerHTML, beforeend, etc.). In HTML, type hx-; htmx + Ctrl+Space for CDN.
  • Lodash: CDN snippet. After _. or lodash. in JS/TS: helper suggestions (map, filter, etc.). In HTML, lodash + Ctrl+Space for CDN script; dot completions also work inside embedded <script>.
  • dayjs: Date/time. Core + plugin API (utc, tz, isBetween, fromNow…); dayjs.extend( with dayjs_plugin_* globals. In HTML: dayjs, dayjs:locale, dayjs:utc, dayjs:timezone, dayjs:localizedFormat, dayjs:customParse, dayjs:isBetween + Ctrl+Space. Optional LSP: docs/starter-types/qubyt-globals.d.ts.
  • Axios: HTTP client. After axios. in JS/TS and in HTML inline <script> (get, post, create, interceptors, etc.). In the HTML body, axios + Ctrl+Space for CDN script. Example: docs/axios-example/index.html.
  • Zustand (vanilla): Small state store. In HTML, zustand or script:zustand + Ctrl+Space: core createStore sample. zustand:persist, zustand:devtools, zustand:selector + Ctrl+Space. In script, after store.persist.: persist API completion. React useStore is not in snippets; use a local server or live preview for module preview. Optional: zustand/vanilla module declaration in qubyt-globals.d.ts. Example: docs/zustand-example/index.html.
  • Chart.js: Charting (UMD). In JS/TS and HTML inline <script>: Chart. (capital C) completion (register, defaults, getChart, etc.). In HTML body, chart or chart:date + Ctrl+Space for CDN. Example: docs/chartjs-example/index.html.
  • Bootstrap 5: CDN snippet. In HTML (prefer <head>), bootstrap, link:bootstrap, or bootstrap:css + Ctrl+Space: jsDelivr 5.3.3 CSS + optional bootstrap.bundle.min.js (Popper included). No class-name IntelliSense; bootstrap:css alone is enough for styles; full bootstrap snippet for modal/dropdown JS. Example: docs/bootstrap-example/index.html.
  • Shoelace: Web components. In HTML, <sl-*> tag completions; attribute completion for selected components (v1.1.8+). Emmet/CDN: shoelace, shoelace:dark, shoelace:bundle + Ctrl+Space.

Other writing features

Besides these, there are details that make daily tasks like formatting, tab management, and file switching easier:

  • Format document: Right-click → Format document or Shift+Alt+F. Auto-format on paste (Ctrl+V) and save (Ctrl+S).
  • Right-click menu: Wrap with tag, Add as snippet, Cut, Copy, Paste, Format document.
  • Line numbers and minimap: Line numbers on the left, minimap on the right. Monaco top blue line removed; cleaner editor view.
  • Tabs: Tab per open file; unsaved indicator; Ctrl+S to save. You can drag and drop tabs to reorder.
  • console.log color: console.log is highlighted in teal (#63BFA5) in JavaScript.
  • Ctrl+click to open file: Ctrl+click on a relative path in src=" or href=" to open that file. Clicking an already open file switches to that tab without error.

Project and files

Beyond writing code, organizing your project matters. With the Explorer panel you manage your file tree, create new files and folders, and move things with drag-and-drop. Here's what's there:

  • Open folder: A single project root is opened; the file tree is listed in tree view.
  • Explorer auto-open: When you open a folder and click OK, the Explorer panel becomes visible automatically.
  • New file / new folder: Created under the project root or selected folder.
  • Drag and drop: Move files and folders. You can also open files by dragging from Explorer to the editor.
  • Context menu: On file right-click: Rename, Move, Delete only (no New file/folder). On folder or empty area: full menu: New file, New folder, Rename, Move, Delete.
  • Close all folders: One click closes all open folders; open/closed state is preserved.

Breadcrumb (path bar)

The path bar at the top of the editor shows where you are and offers quick navigation. The path starting from the project root is split into clickable segments:

  • Path from project root: The breadcrumb starts from the project folder only; system paths like c:, Users, Desktop are not shown.
  • Clickable segments: Clicking path segments (folder or file name) lists that folder's contents in a dropdown.
  • Quick file switch: Click a file in the dropdown to open it directly.
  • Cursor position: Line and column info is shown in the breadcrumb.

LSP (Language Server Protocol)

LSP starts automatically when a folder is opened and uses the same language engines as VS Code. It provides smart completion, go to definition, find references, and error display across the project:

  • JavaScript / TypeScript: Completion (IntelliSense), Go to Definition (Ctrl+Click), Find References (right-click), Hover (documentation), Rename Symbol (F2), Code Actions (Quick Fix), Diagnostics (squiggle).
  • HTML: Tag and attribute completion, hover, error display.
  • CSS / SCSS / Less: Property and value completion, hover, diagnostics.
  • JSON / JSONC: Schema-based completion, hover, error display (package.json, tsconfig.json, etc.).
  • Error recovery: Automatic restart if the LSP server crashes unexpectedly; reconnection when WebSocket closes on the renderer side.

WebSocket listens only on 127.0.0.1; allowed ports are limited by CSP.

Lint and error display

Catching errors early while coding shortens debug time. The ESLint-based lint system detects common issues in your JavaScript files and shows them both in the editor and in the Problems panel. It watches for:

  • ESLint-based lint: JavaScript files: undefined variable (no-undef), unused variable (no-unused-vars), empty function (no-empty-function), constant condition loop (no-constant-condition), unreachable code (no-unreachable), and unused parameter detection. Parameters starting with _ are ignored.
  • Squiggle (underline): Errors and warnings are marked with red/yellow lines in the editor; hover to see the message.
  • Problems panel: All errors in a separate list; click to jump to the relevant line.
  • Warnings panel: Warnings (e.g. unused variable) listed in a separate tab.
  • Tab switching: Bottom panel: switch between TERMINAL, PROBLEMS, and WARNINGS tabs; each tab shows a badge count.

Debug Tools

Adding console.log is something you do often when working with JavaScript and TypeScript. Debug Tools speeds this up with one click or a shortcut, Turbo Console Log style. Click the bug icon in the top bar; from the menu you can add logs, clear existing logs, or list all log lines in the project.

  • Insert Log: Adds a line in console.log("[file:line] varName:", varName); format for the selected variable or word under the cursor. Shortcut: Ctrl+Shift+L.
  • Insert Warn / Error / Debug: Same logic for console.warn, console.error, console.debug. Shortcuts: Ctrl+Shift+W, Ctrl+Alt+E (Error), Ctrl+Shift+D.
  • Remove Logs: Removes all console.log/warn/error/debug/info lines (active and commented) from the file.
  • Toggle Logs: Converts active console lines to comments; converts commented ones back to active.
  • Find Logs: Lists all console.* lines in the project; click to jump to the file and line.

Component Gallery and Blocks

With v1.2.0, you manage in-project components and reusable HTML fragments in one flow:

  • Component Gallery: Improved onboarding for components/; components.json for card descriptions and folder groups. Gallery text sizes and the security note box in library samples were updated.
  • Blocks & catalog tab: One-click HTML insertion from paths defined by blocks/, blocks.json, and qubyt-insert-catalog.json at the project root.

Panels

Activity bar icons open different sides of the editor. From templates to notes, Markup & Style Analyzer to Live Page, each panel focuses on one job. As you move down the left side, you’ll see:

  • Templates panel: Project and UI templates; in the same panel, Component Gallery (project components, blocks, catalog) and the Starter projects tab (mini HTML/CSS/JS templates same records as Templates → Mini projects). Shared card and identity/detail flow.
  • Snippets panel: Add and use your own snippets.
  • Notes panel: Opens from the note icon in the Activity bar. Create new notes (modal for the name), multiple notes under notes/, right-click to open/rename/delete. Use Markdown for TODOs, ideas, and notes.
  • Markup & Style Analyzer: Opens from the brush icon in the Activity bar. Detects unused class, undefined class, missing alt, invalid property, and empty rules in HTML and CSS. Results grouped as Errors, Warnings, and Info; click to jump to the line. System is working, testing and development ongoing.
  • Markdown preview: With a .md file open, split view from the Preview button in the breadcrumb; headings, lists, tables, links, task lists, Mermaid diagrams, and local images.
  • Run: Preview the project in the browser with a local server.
  • Live Page: Live preview next to the editor. HTML/CSS refreshes automatically on save. Layout Inspector: click an element in the preview and change Display, Layout, Spacing, Typography, Color, Flex from the panel; changes are written straight to the right CSS file. Multiple CSS files (style.css, components.css, etc.); rules inside @media and @supports blocks are updated. System is working, testing and development ongoing.
  • Bottom panel (Terminal / Problems / Warnings): VS Code–style bottom panel; switch between three tabs. Terminal: npm, npx, node <file.js>. Problems and Warnings: lint errors and warnings. Drag to resize height (same behavior as Explorer).
  • Activity bar: Home, Explorer, Templates (includes Component Gallery), Theme Creator, Developer Insights, Notes, Markup & Style Analyzer, Project Map, CSS Builder.

Developer Insights

If you're curious about your coding habits, Developer Insights is for you. Dashboard opened via the chart icon in the Activity bar; shows daily duration, consecutive day streak, language usage, and activity heatmap. All data is stored locally; nothing is sent to any server. The dashboard includes:

  • Today / Streak / Weekly: Daily duration, consecutive day streak, and weekly total.
  • Language usage: HTML, CSS, JS, TS, etc. durations; logos match file icon colors (HTML orange, CSS blue, JS yellow, etc.).
  • File activity: Folder-based file durations; separator lines between folder blocks.
  • Activity heatmap: GitHub contribution–style visualization; daily coding time for the last 12 weeks by color intensity (Low → High).
  • Theme switcher access: When the dashboard is open, the theme switcher in the top bar stays visible.

Interface and experience

The editor is with you not only while you code, but when you present, read information, or open multiple projects. Presentation mode, language selection, and multi-window support complete the experience:

  • Language switch (i18n): Switch between Turkish / English from the Settings menu or the language indicator in the status bar. Menu, status bar, panels, and interface text update to the selected language.
  • Presentation mode: Opens from the View menu or Ctrl+Shift+P. Menu, top bar, sidebar, bottom panel, and tabs are hidden; only the editor stays full screen. Font size and line numbers are configurable. Esc to exit.
  • About modal: Dark-themed About window from the Help menu; version info, qubytstudio.com and GitHub Source Code links.
  • Welcome page: When no project is open, Quick Tips, Recent Projects, and other cards are shown in an organized layout.
  • Multiple windows: Each window closes independently; a window's close button only closes that window.
  • Custom Yes/No confirmation: Delete confirmations (theme, file, etc.) use an editor-styled Yes/No box; the default browser dialog is not used.

What can't it do? (This version)

The editor is currently focused on HTML, CSS, JavaScript, and TypeScript. The following are not available or limited in this version:

  • Extension or theme marketplace
  • Python, Go, etc. language support
  • Debugger (breakpoints, step-through execution)
  • npm package install and script execution (npm install, npm run build, etc.)

Summary

In short, here is how releases have stacked up:

v1.2.1: Learning Mode (experimental); Explorer F2 / Delete when the tree is focused; Starter projects tab in the Component Gallery and mini project sample improvements; inline code emphasis in library examples.

v1.2.0: Component Gallery Improved onboarding for project components (components/), components.json for card descriptions and folder groups. New Blocks & catalog tab: one-click HTML from paths defined by blocks/, blocks.json, and root qubyt-insert-catalog.json. Bundled Qubyt Theme palette (Version 2–compatible). Gallery text sizes and the library sample security note box design updated.

v1.1.8: Shoelace attribute completion for selected components; Supported Libraries modal width/typography and "Limits" on cards. Qubyt HTML/CDN/path suggestions disabled inside HTML <style>. Chart.js example page, embedded completion test file, and starter types updates. Zustand vanilla: HTML zustand CDN snippet, library card, and zustand/vanilla starter types. Bootstrap 5.3 CDN: bootstrap, link:bootstrap, bootstrap:css + Ctrl+Space.

v1.1.7: Supported Libraries Completion and snippets for Alpine.js, htmx, Lodash, dayjs, Axios, Chart.js, and Shoelace. HTML x-, @, hx- attribute completions; hx-swap, hx-trigger value suggestions; alpine, htmx, lodash, axios, zustand, chart (+ chart:date), dayjs (+ dayjs:*), shoelace (+ shoelace:dark, shoelace:bundle) Emmet snippets; Shoelace <sl-*> tag completions; Chart.js Chart. completions. From the Help menu, see "Supported Libraries" and "CDN snippets" for details.

v1.1.6: i18n TR/EN language support (menu, status bar, panels). Tab drag and drop for tab reordering. Monaco top blue line removed. Drag file from Explorer to editor.

v1.1.5: LSP Phase 6 JSON Language Server added (completion, diagnostics, hover for package.json, tsconfig.json, etc.). Error recovery: Automatic restart when LSP server crashes; renderer reconnects when WebSocket closes. LSP connection fix: race condition on folder open with editor-ready resolved.

v1.1.4: Unsaved changes warning (when closing the app). Root folder name in Explorer title. CSS Builder panel CSS generation with Flexbox/Grid. Live Page and Markup & Style Analyzer @import support.

v1.1.3: Project Map system added via the map icon in the Activity bar: file structure (ASCII tree), Import Graph (script, link, import, require), and Component Graph (iframe, object, embed, SSI) visualization. "Powered by Electron" text removed from status bar and About window; interface simplified.

v1.1.2: Terminal panel tab switching fix (TERMINAL, PROBLEMS, WARNINGS tabs always clickable).

v1.1.0: Live Page one of the editor's most important systems. Live preview on HTML/CSS save; Layout Inspector to click elements in the preview and change Display, Layout, Spacing, Typography, Color, Flex from the panel; changes written directly to the relevant CSS file. Multiple CSS file support (style.css, components.css, etc.); rules inside @media and @supports blocks updated. Markup & Style Analyzer improvements (compound selectors, empty rule messages).

v1.0.9: Markup & Style Analyzer, ESLint extension, Presentation mode (Ctrl+Shift+P), Activity heatmap.

v1.0.8: Notes system, Debug Tools, Markdown preview (Mermaid, task lists), Developer Insights dashboard.

In short: Project management, snippets/templates, ESLint lint, terminal, browser preview, theme customization, Problems and Warnings panels for a VS Code–like experience. Live preview with Live Page and visual editing with Layout Inspector; developed as a "single-focus for web" editor.

arrow_back Back to Home