🧠 Write JSX/TSX in HTML Instantly with MLPL: No Build Tools Needed!

MLPL (Multi-Language Parsing Layer) lets you write React components using <script type="text/jsx"> and <script type="text/tsx"> directly in plain HTML—no bundlers, no setup, no build step.

Whether you're prototyping, teaching React, or enhancing legacy apps with modern components, MLPL lets you write and run modern React code instantly in the browser.

⚡ Why MLPL?

💡 MLPL is a drop-in JavaScript library that:

Transforms and renders JSX/TSX at runtime
Provides full support for TypeScript
Enables state, hooks, and modern React APIs
Comes with dev tools, inspection panel, and error boundaries

🛠 Installation

NPM (for frameworks or bundlers):

npm install mlpl

Or load via CDN:

<script src="https://unpkg.com/mlpl@latest/dist/index.js"></script>

⚙️ Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <title>MLPL Demo</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Load React -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Load MLPL -->
    <script src="https://unpkg.com/mlpl@latest/dist/index.js"></script>

    <!-- JSX Component -->
    <script type="text/jsx" data-target="#root">
      function HelloWorld({ name = "World" }) {
        const [count, setCount] = useState(0);
        return (
          <div>
            <h1>Hello, {name}!</h1>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
          </div>
        );
      }
      const Component = HelloWorld;
    </script>
  </body>
</html>

That’s it. React component rendered into #root—with full interactivity.

✨ TypeScript Example (TSX)

<script type="text/tsx" data-target="#app">
  interface User {
    id: number;
    name: string;
    email: string;
  }

  function Profile({ user }: { user: User }) {
    const [editing, setEditing] = useState(false);
    return (
      <div>
        <h2>{user.name}</h2>
        <p>{user.email}</p>
        <button onClick={() => setEditing(!editing)}>
          {editing ? 'Save' : 'Edit'}
        </button>
      </div>
    );
  }

  const Component = () => (
    <Profile user={{ id: 1, name: "Jane Doe", email: "jane@example.com" }} />
  );
</script>

MLPL fully supports TypeScript types, inference, and errors at runtime.

🧪 Power Features

🔄 Runtime Execution

You can even inject and run JSX/TSX on the fly:

import { MLPL } from 'mlpl';

const mlpl = new MLPL({
  autoRender: true,
  enableDevMode: true
});

await mlpl.execute(`
  function Dynamic() {
    return <div>Hello from dynamic code!</div>;
  }
  const Component = Dynamic;
`);

🔍 Component Registration

mlpl.registerComponent('MyButton', ({ children }) => (
  <button>{children}</button>
));

🖥 Dev Tools

Press Ctrl + Shift + M to open the dev panel with:

Component tree viewer
Error logs
Render performance
Registered components

Or access it in the console:

window.__MLPL_DEV__.getComponents();
window.__MLPL_DEV__.toggleDevPanel();

🛡 Error Handling

MLPL wraps all components in error boundaries and logs:

JSX/TSX compile errors
TypeScript type issues
Runtime crashes

📊 Use Cases

✅ Prototyping: Spin up a quick React idea with no build config
📚 Education: Embed live React examples in articles or docs
⚙️ Legacy sites: Enhance HTML pages with React interactivity
🧪 Testing: Try new patterns without scaffolding a project

🧯 Security Notice

MLPL executes code in the browser. Use only trusted sources and avoid running unverified user input.

👨‍💻 Contribute

MLPL is open source and MIT licensed. Contributions are welcome!

🧵 Final Thoughts

MLPL bridges the gap between raw HTML and modern JSX/TSX. Whether you're teaching, demoing, or hacking together an idea, this library gives you the power of React with the simplicity of script tags.

🔗 npm: mlpl
🔗 GitHub: mlpl

✨ If you enjoyed this article, consider giving MLPL a ⭐ on GitHub and dropping your thoughts below!

Zppqr @zppqr