DEV Community

Zppqr
Zppqr

Posted on • Edited on

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

#jsx #html #tsx #react

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
Enter fullscreen mode Exit fullscreen mode

Or load via CDN:

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

⚙️ 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
`);
Enter fullscreen mode Exit fullscreen mode

🔍 Component Registration 

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

🖥 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();
Enter fullscreen mode Exit fullscreen mode

🛡 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!

Top comments (0)