Browse recipes

Integrate Valyrian.js with Vite

Adopt Valyrian.js in a Vite project with one automatic TSX runtime.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.

Run this recipe

Starting project
Start with the vanilla TypeScript Vite project created in Step 1.
File
Configure tsconfig.json, vite.config.ts, index.html and src/main.tsx as shown.
Run
Run npm run dev and open the Vite URL. Run npm run build and npm run preview to execute the built entry.
Observable result
Both development and preview display Valyrian integration is working.

1. Install

Create a vanilla TypeScript Vite project and install Valyrian.js.

bash
npm create vite@7.0.0 my-valyrian-vite -- --template vanilla-ts
cd my-valyrian-vite
npm i valyrian.js@9.1.13

2. Configure TypeScript

json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "valyrian.js"
  }
}

3. Configure Vite

ts
import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    jsx: "automatic",
    jsxImportSource: "valyrian.js",
  },
});

4. Update index.html

Replace the scaffold document so Vite loads the TSX entry instead of src/main.ts.

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Valyrian Vite app</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

5. Create src/main.tsx

tsx
import { mount } from "valyrian.js";

function App() {
  return <main>Valyrian integration is working.</main>;
}

mount("#app", App);

6. Verify

Development renders the page, build completes without JSX transform errors and preview renders the built output.

bash
npm run dev
npm run build
npm run preview

Continue