all posts

Vite Setup

Bootstrap a new vite project using vanilla template.

npm create vite@latest jsx-renderer-vite -- --template vanilla

Enter the project and install the dependencies

cd jsx-renderer-vite && npm install

Then, adjust the project files so that the final structure is like this

.
├── src/
│   └── main.jsx
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

The following files are important for this setup process

// vite.config.js

import * as v from "vite";

export default v.defineConfig({
  esbuild: {
    // use h as the JSX Factory function instead of React.createElement
    jsxFactory: "h",
    // use Fragment for JSX fragments (<>)
    jsxFragment: "Fragment",
  },
});
// package.json

{
  "name": "jsx-renderer-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^7.1.7"
  }
}
<!-- index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx-renderer-vite</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- change the value of "src" here to main.jsx -->
    <script type="module" src="src/main.jsx"></script>
  </body>
</html>

Creating the h Function

Now let's implement the h() function that esbuild will call for each JSX element.

// main.jsx

function h(nodeName, attributes, ...args) {
  let vnode = { nodeName };
  if (attributes) vnode.attributes = attributes;
  if (args.length) vnode.children = [].concat(...args);
  return vnode;
}

This function creates a virtual DOM node object with:

  • nodeName: The HTML tag name (e.g., "div")
  • attributes: An object of element attributes (optional)
  • children: An array of child nodes (text or other virtual nodes)

The ...args syntax collects all remaining arguments into an array, and [].concat(...args) flattens nested arrays.

Writing the First JSX

// main.jsx

function h(nodeName, attributes, ...args) {
  let vnode = { nodeName };
  if (attributes) vnode.attributes = attributes;
  if (args.length) vnode.children = [].concat(...args);
  return vnode;
}

const element = <div>Hello World</div>;
console.log(element);

Run npm run dev to start Vite's development server. Vite will automatically transpile the JSX and you can see the result in the browser console.

Implementing the DOM Renderer

Now let's implement the function to convert our virtual DOM nodes into real DOM elements. Add the renderer to src/main.jsx:

// main.jsx

function h(nodeName, attributes, ...args) {
  let vnode = { nodeName };
  if (attributes) vnode.attributes = attributes;
  if (args.length) vnode.children = [].concat(...args);
  return vnode;
}

// Function to render virtual DOM nodes to real DOM elements
function render(vnode) {
  // Handle text nodes
  if (typeof vnode === "string") return document.createTextNode(vnode);

  // Handle functional components
  if (typeof vnode.nodeName === "function") {
    const componentVnode = vnode.nodeName(vnode.attributes || {});
    return render(componentVnode);
  }

  // Create DOM element
  let n = document.createElement(vnode.nodeName);

  // Set attributes
  Object.keys(vnode.attributes || {}).forEach((k) =>
    n.setAttribute(k, vnode.attributes[k]),
  );

  // Render and append children
  (vnode.children || []).forEach((c) => n.appendChild(render(c)));

  return n;
}

const ITEMS = "some random content".split(" ");

// A functional component that returns JSX
function ItemList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

// Main JSX structure
const vdom = (
  <div id="app">
    <h1>JSX Renderer Demo</h1>
    <p>Look, a simple JSX DOM renderer!</p>
    <ItemList items={ITEMS} />
  </div>
);

document.body.appendChild(render(vdom));

The ItemList function returns JSX, which Vite transpiles to h()~ calls. The {items.map(...)} expression gets embedded directly in the transpiled code. Vite's fast refresh will update the component instantly when you make changes.