Preview JSX without scaffolding a React project first

HTML still offers one of the simplest loops in web work: create a file, save it, double-click it, and the browser paints a page. React or AI-generated UI often arrives instead as:

App.jsx

Double-clicking shows source, not a page. Searching “how do I open a JSX file?” quickly becomes a React tooling tutorial. The mismatch deserves a clearer explanation—and a lighter preview path when a full app is not the goal.

Familiar markup does not make JSX into HTML

At a glance JSX can resemble HTML:

<div>
  <h1>Hello World</h1>
  <p>Welcome to my application.</p>
</div>

Familiar tags do not make the file HTML with a different extension. JSX is syntax embedded in JavaScript application code, most often with React, and can mix logic with markup:

function Welcome({ name }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
    </div>
  );
}

Expressions, props, and components mean the browser needs a transform and a runtime story. Renaming:

App.jsx

to:

App.html

does not invent that pipeline.

So how are you normally supposed to see JSX?

The standard path is to mount the component inside a React app. A common sequence looks like:

Install Node.js
       ↓
Create React project
       ↓
Install dependencies
       ↓
Add JSX component
       ↓
Run development server
       ↓
Open browser

That workflow is appropriate when you are building a real application. It is heavy when you only need to look at a component.

What if you only want to preview the component?

AI may have generated it. A teammate may have sent it. You may be comparing layouts or deciding whether React is even the right bet. Scaffolding a whole project for those moments feels disproportionate.

AI has made this situation much more common

Assistants frequently return JSX when someone expected static HTML. The instinctive response is the full stack: React, Node, dependencies, a dev server, and assorted tooling—even when the only question is whether the UI looks right. That friction motivated a dedicated preview tool called Preview Kit.

The rise of “temporary code”

Generation speed creates more throwaway experiments:

dashboard-a.jsx
dashboard-b.jsx
dashboard-c.jsx
dashboard-d.jsx

Perhaps one variant ships; the others were probes. When code is cheap to create, inspecting and discarding it should be cheap too.

Previewing is not the same as running a production application

Running an app may involve routing, state, APIs, auth, databases, dependency graphs, build optimization, and tests. Previewing a prototype often asks only: what does this interface look like? Forcing both jobs through the same project setup adds friction neither side needs.

Where a dedicated preview app fits

Preview Kit is a Windows application aimed at the preview step: you have a file, you open it, you see a render. Supported formats include:

JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS

and related types. It does not replace VS Code, React, Vue, or a proper development server. It covers the moment before those tools are justified.

Consider a TSX component

An assistant might emit:

function UserCard() {
  return (
    <div className="card">
      <h2>Alex</h2>
      <p>Frontend Developer</p>
      <button>View Profile</button>
    </div>
  );
}

saved as:

UserCard.tsx

Evaluating the card does not require a full application. A preview pass keeps small experiments from becoming projects by default.

The same idea applies to Vue

You might receive:

ProductCard.vue

with a template such as:

<template>
  <div class="product-card">
    <h2>Product Name</h2>
    <button>Buy Now</button>
  </div>
</template>

Opening source for editing is different from seeing the component rendered. Both views matter; they should not require the same setup cost.

Markdown has the same concept

A heading like:

# My Documentation

or body text such as:

This is **important**.## Installation1. Download the application.
2. Open the file.
3. Start working.

is useful raw when editing, and useful rendered when reading. The lesson is not about extensions. Source and preview are two views of one artifact.

Why this matters more now

AI-assisted work produces files outside classic project trees: UI mockups, React or Vue components, SVGs, Markdown notes, CSS experiments. The first need is often inspection, not deployment. Fast preview closes that gap.

A better experiment loop

Instead of:

Generate code
↓
Create project
↓
Install dependencies
↓
Configure environment
↓
Run project
↓
See result

prefer:

Generate
↓
Preview
↓
Evaluate
↓
Improve

and only then:

Build the actual project

Experimentation and productization stay separate, which matches how generative workflows actually feel.

Not every file needs a project

A file does not always mean “start a repo.” Sometimes it means “take a look.” Designers send SVGs; models emit JSX; teammates share Markdown; configs arrive as JSON. Understanding comes before editing or shipping.

The gap that motivated the tool

The product began from a small annoyance: a generated JSX file that was harder to preview than expected. Generation has gotten easier; preview has not kept pace. The tool exists for that missing step.

Shortening the path from file to render

The goal is to shrink the distance between a file and its preview—starting from “let me see what this is” instead of “how do I configure a toolchain?” That helps with:

.jsx
.tsx
.vue
.html
.md
.json
.css
.scss

and other supported formats.

The bigger picture

This is not only about JSX. When code is cheaper to generate, experiments multiply. When experiments multiply, quick inspection gains value. Tools that remove unnecessary setup earn their place.

You don’t always need to build first

Sometimes the right order is not build → test → decide. Sometimes it is generate → preview → decide → build. That lighter loop matches receiving an unexpected .jsx and wanting to see the design before committing to a React application, a Node toolchain, and a long install log.

Preview Kit

Preview Kit is a Windows app for previewing developer and web-related formats including JSX, TSX, Vue, HTML, Markdown, JSON, CSS, and SCSS. It is for moments when the file already exists and a full development setup would be overkill: open the file, see the result, then choose what happens next.

Microsoft Store listing for Preview Kit