vite.landing Open editor

tooling/vite-lite

Vite Online IDE for Glob Imports and env, Without Node

Write against the Vite features that matter in a browser — import.meta.glob, import.meta.env and .env files — compiled with esbuild, with no Node dev server to keep alive.

Open the Vite Lite starter What Vite Lite is
globimport.meta.glob
envimport.meta.env
compileesbuild
dev servernone
main.js.env
// a file-based mini-blog, no routing config
const posts = import.meta.glob('./posts/*.md', {
  eager: true,
});

const title = import.meta.env.VITE_SITE_TITLE;

document.querySelector('#app').innerHTML = `
  <h1>${title}</h1>
  <ul>${Object.keys(posts)
    .map((p) => `<li>${p}</li>`).join('')}</ul>
`;
vite lite · glob resolved at compile

01 platform

What Vite Lite is, and what it is not

An online tool that claims to be Vite and then cannot run a Vite feature wastes your time. So here is the honest shape of it before anything else — what works, and what needs a machine.

  • The authoring features that matter

    import.meta.glob with eager and lazy chunks, import.meta.env with .env files, TypeScript and zero config — the parts of Vite you actually write against, working in the tab.

  • Compiled with esbuild, in a worker

    Files are transformed by esbuild client-side, off the main thread. It is fast for the same reason Vite is fast in development, and it needs nothing installed.

  • Not the Node dev server

    There is no Node process, so this is not the full vite CLI, its plugin ecosystem, or a Rollup production build. Anything that depends on a running server belongs on a machine, and no browser tab can change that.

  • Private and installable

    The project lives in your browser, never on a server, and installs as a PWA — so a Vite-style experiment keeps working offline and stays yours.

02 deep dive

import.meta.glob, eager and lazy

Glob imports are the Vite feature people miss most in a plain browser setup, and they are the center of the starter.

One line replaces a manual index. import.meta.glob('./posts/*.md') finds every matching file and hands you a map of them, so adding a post is dropping a file in a folder — there is no list to keep in sync by hand.

Eager gives you the modules now. Pass { eager: true } and each match is imported up front, so posts['./posts/a.md'] is the module itself. It is the right choice for a small set you always need.

Lazy gives you loaders. Without eager, each value is a function that imports on call — a code-split point you await when the route or the click actually needs it. The starter shows both side by side.

pattern
'./posts/*.md'
eager
modules up front
lazy
() => import(...)
use
file-based pages
glob.js
// eager: the modules, right now
const all = import.meta.glob('./pages/*.js', { eager: true });

// lazy: loaders you await on demand
const routes = import.meta.glob('./pages/*.js');
const load = routes['./pages/about.js'];
const mod = await load();   // code-split here
same folder, two strategies

03 pipeline

How a Vite project builds without a Node server

Four stages, all client-side. Knowing where glob and env are resolved is what makes the difference from the real dev server clear.

  1. Scan globs

    Each import.meta.glob pattern is matched against the project's files at compile time, and expanded into real imports — eager ones inline, lazy ones as dynamic-import loaders.

  2. Inline env

    import.meta.env references are replaced with the values from your .env, keeping only the keys prefixed VITE_, so configuration is baked in exactly as Vite would expose it to client code.

  3. Transform

    esbuild strips TypeScript and compiles modern syntax in a worker. There is no vite.config to run and no plugin pipeline — the zero-config path, done in the browser.

  4. Render

    The resulting ES modules load through a native import map and run in the preview, updating on save. There is no dev server holding the state; a save is a rebuild of what changed.

04 features

What the Vite Lite starter includes

Everything below is on the moment you open the Vite Lite editor, which starts as a file-based mini-blog demonstrating glob imports and env config together.

  • Glob-driven file routing

    The starter builds its pages from import.meta.glob, so the folder is the route table. Add a file, get a page — the pattern most Vite projects reach for first.

  • TypeScript, zero config

    Write .ts and .tsx with no tsconfig to argue with. esbuild strips the types on the same fast pass, so a typed Vite-style project costs nothing extra.

  • npm without a terminal wait

    Search and install; packages resolve through esm.sh into a native import map, ready on the next build, with no node_modules folder anywhere.

  • Environment variables

    A .env file with VITE_-prefixed keys feeds import.meta.env, so configuration lives outside the code exactly the way it does in a real Vite app.

  • Live preview, four ways

    Full width, split beside the code, in real device frames, or in its own tab — so a glob-built page is something you watch assemble.

  • Real Git in the browser

    Stage, commit, branch and read history through isomorphic-git, offline, and import an existing repository without leaving the tab.

05 deep dive

Configuration through .env and import.meta.env

The other half of the Vite authoring model is how configuration reaches the code, and Vite Lite follows the same rule.

.env holds the values. A key like VITE_SITE_TITLE=Frontier sits in a .env file at the project root, out of the source, so changing a title or an endpoint does not mean editing a module.

Only VITE_ keys reach the client. Vite exposes just the prefixed keys to browser code, and Vite Lite keeps that rule — a secret without the prefix is not inlined, which is the same guardrail you rely on locally.

import.meta.env reads them. In code, import.meta.env.VITE_SITE_TITLE is replaced with the value at compile time, so there is no runtime lookup and no configuration object to wire up.

file
.env at root
exposed
VITE_ keys only
read
import.meta.env
when
inlined at compile
.env
VITE_SITE_TITLE=Frontier
VITE_AUTHOR=The XCODX team
# no VITE_ prefix → never reaches the client:
SECRET_TOKEN=not-inlined

06 workflow

From a glob import to a rendered page

No scaffolding, no dependency install, no dev server to keep alive — the whole loop, with glob and env resolved as you save.

vite-lite-blog — xcodx
  • new project → Vite Lite
  • created main.ts, .env, posts/hello.md
  • add posts/second.md
  • glob rematched · 2 posts · no config touched
  • save main.ts
  • esbuild: ts → js 5ms (worker)
  • env inlined · preview reloaded
  • git commit -m "second post"
  • [main 7c31e0d] second post · 3 files changed

  • The folder is the config

    Because pages come from a glob, adding a file is the whole change — there is no route list or manifest to edit alongside it.

  • The same loop on a tablet

    esbuild runs client-side, so an iPad compiles a Vite-style project the same way a laptop does, with no local Node.

  • Honest about the edges

    If a project needs the real dev server or a Vite plugin, that is a machine job — Vite Lite covers the authoring features, not the whole CLI.

07 ecosystem

Vite in front of the frameworks it bundles

Vite sits in front of React, Vue, Svelte and Solid in the wider world, and the same editor compiles any of them per file beside a Vite-style entry.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

08 languages

What Vite Lite compiles for you

A Vite-style project sits beside every other language the editor compiles in the browser, renders natively, or runs on demand.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

09 questions

Vite in the browser — common questions

Does this run the real Vite dev server?

No, and it does not claim to. Vite Lite implements the Vite authoring features that work in a browser — import.meta.glob, import.meta.env with .env, TypeScript and zero config — compiled with esbuild. There is no Node process, so the full vite CLI and its plugin ecosystem are not part of it.

What is import.meta.glob and does it work here?

It is Vite's way of importing many files at once by pattern, so a folder becomes a set of modules or loaders. It works here in both forms: eager, which imports the modules up front, and lazy, which gives you dynamic-import loaders you await on demand.

Can I use .env files and import.meta.env?

Yes. A .env file at the project root holds your values, only VITE_-prefixed keys are exposed to client code, and import.meta.env.VITE_SITE_TITLE is inlined at compile time — the same rule and the same syntax as a local Vite project.

Do Vite plugins work in Vite Lite?

No. Vite's plugin system runs inside the Node-based dev and build pipeline, which is not present here. Vite Lite covers the browser-facing authoring features; a project that depends on a specific plugin needs the real CLI on a machine.

Can I install npm packages in a Vite Lite project?

Yes. Search the npm panel and install; packages resolve through esm.sh into a native import map and import normally, with no node_modules folder. It is the same package workflow the rest of the editor uses.

Why esbuild instead of Vite's own pipeline?

Vite itself uses esbuild for its fast transforms in development, and esbuild runs well in a browser worker. Using it here gives the same quick TypeScript-and-syntax compile without needing the Node parts of Vite's build.

Can I build a production bundle here?

No. A production build runs Rollup on a machine and is outside what a browser tab does. Vite Lite is for authoring and previewing; when you want to ship, export the project and run the real build locally.

Which frameworks can I use with Vite Lite?

The starter is framework-light on purpose, but you can import React, Preact, Vue or Solid from npm and use them beside glob imports and env config, because the editor compiles each of them per file.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Can I use XCODX on a tablet or Chromebook?

Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.

Can I export a project or move it to my own machine?

Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.

Nothing to install

Open the Vite Lite starter now

A file-based mini-blog using glob imports and env config, running in under a minute — no account wall and nothing to install.

Open the Vite Lite starter Browse the docs