Browser

module-tsx

Try it

Use this skill whenever a user wants to run TypeScript, TSX, or React in the browser without a build step.

What it does

module-tsx runs TypeScript and TSX directly in the browser — no build step, no bundler. It transpiles code on the fly and rewrites bare specifiers (like ) to automatically.

The skill document

module-tsx skill

module-tsx runs TypeScript and TSX directly in the browser — no build step, no bundler. It transpiles code on the fly and rewrites bare specifiers (like "react") to https://esm.sh/ automatically.

How to load it

Load this before any `


Or load an external file:

```html

React / TSX — zero config

Bare specifiers resolve to esm.sh automatically, so React just works with no import map needed. JSX without an explicit import React is fine too — it's auto-injected:

Example complete page

<!doctype html>

  
    
    My App

Import maps — only when you need them

An import map is optional. Use one only when you need to:

  • Pin a specific version (e.g. react@18 instead of latest)
  • Deduplicate peer dependencies across packages

The import map must be declared before the module-tsx script tag, because module-tsx reads it at startup:

Peer dependency deduplication

When a UI library (like @radix-ui/themes) depends on the same React as your app, both must resolve to the exact same URL or you get "Invalid hook call" crashes. Use ?deps= to tell the CDN which React to bundle against:

Relative imports

.ts and .tsx files can be imported relatively — fetched and transpiled on the fly:

import { Button } from "./components/Button.tsx";

CSS imports

import "./style.css"; // injects a  tag into 
import styles from "./button.module.css"; // returns { root: "abc123_root", ... }

Dev vs Production

Use the dev build during development for a rich error overlay (runtime errors, failed imports, source-mapped stack traces with code frames):

Use the production build for deployment (no error overlay, smaller footprint):

Common mistakes

  • defer attribute: not supported. Use async or no attribute.
  • Dual React: if a package depends on React as a peer, use ?deps=react@18 so it shares the same instance — otherwise you'll get hook errors.
  • Import map ordering: if you use an import map, it must come before the module-tsx `` tag.

Related skills

diagram-generator

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

microsoft-excel

Read and write Excel workbooks, worksheets, ranges, tables, and charts in OneDrive through Microsoft Graph with managed OAuth.

by byungkyu800 installs42 stars

Join meeting

Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.

by johnpatternai21 installs8 stars

Productivity

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván1 installs