{"id":25819,"library":"jsxdirect","title":"jsxdirect","description":"jsxdirect v0.0.12 is a browser-based JSX transpiler that converts JSX strings into virtual DOM render functions at runtime. It supports entire script blocks, inline JSX expressions using `jsx()` or `jsx.compile()`, and template literal delimiters (`${}`) in addition to standard `{}`. Key differentiators include no build step, lightweight runtime (no Babel needed), and compatibility with React, Preact, and Hyperapp. However, it does not support case-sensitive tags (all tags are lowercased), limiting use with React components. Last updated in 2019, it is in maintenance-only status.","status":"maintenance","version":"0.0.12","language":"javascript","source_language":"en","source_url":"https://github.com/anywhichway/jsxdirect","tags":["javascript","jsx","transpile","translate"],"install":[{"cmd":"npm install jsxdirect","lang":"bash","label":"npm"},{"cmd":"yarn add jsxdirect","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsxdirect","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"jsxdirect is designed for the browser and does not export a CommonJS module. Use a bundler or include the script globally.","wrong":"const jsx = require('jsxdirect');","symbol":"jsx","correct":"import { jsx } from 'jsxdirect';"},{"note":"The `compile` function is exported as a named export from the browser bundle. In Node.js, it's not available as a pre-packaged module.","wrong":"const compile = require('jsxdirect').compile;","symbol":"compile","correct":"import { compile } from 'jsxdirect';"},{"note":"The package has a default export that is the same as the named `jsx` export. Use named imports to avoid confusion.","wrong":"const jsxdirect = require('jsxdirect');","symbol":"default import","correct":"import jsxdirect from 'jsxdirect';"}],"quickstart":{"code":"\n\n\n\n\n\n\n

\n\n\n\n","lang":"javascript","description":"Shows a complete HTML page that uses jsxdirect to compile a JSX function and render it with React at runtime."},"warnings":[{"fix":"Write component names in ALL CAPS, e.g., 'MYBUTTON' instead of 'MyButton'.","message":"Case-sensitive tags are not supported; React components must be all-uppercase.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use e.g., or .","message":"JSX expressions inside attribute values must use template literal syntax `${}` if the attribute value is a string, otherwise standard `{}` works for expressions.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Migrate to a maintained JSX transformer; for React, use @babel/standalone.","message":"The package has not been updated since 2019; consider using modern alternatives like Babel standalone or esbuild-wasm.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure jsxdirect.js is loaded before any script with type='text/jsx' and call jsx.compile() after those scripts.","cause":"JSX is not transpiled before browser execution; jsxdirect script must be loaded and compile called.","error":"Unexpected token '<'"},{"fix":"Add to the HTML.","cause":"jsxdirect library is not included in the page.","error":"Uncaught ReferenceError: jsx is not defined"},{"fix":"Include React and ReactDOM scripts (or Preact/Hyperapp) before jsxdirect.","cause":"React library not loaded before using jsxdirect.","error":"React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}