JSX / React Runtime

1What Is JSX Runtime?#

JSX is a syntax extension used by React that lets you write HTML-like code inside JavaScript. Browsers and WebView cannot run JSX directly - it needs to be compiled first.

The JSX Runtime feature loads React and Babel Standalone into your app at runtime, so raw JSX code just works - no build tools needed.

2When to Use This#

Enable JSX Runtime when:

• You write React/JSX code in the Custom JS field
• Your HTML files contain <script type="text/babel"> tags
• You generated JSX code with AI
• You want to use React components without setting up a build pipeline

⚠️ NOT needed if you upload a ZIP project - the built-in esbuild bundler already handles JSX for ZIP uploads.

3How to Enable#

1. Go to Step 4 (Advanced Features) in the wizard
2. Toggle ON '⚛️ JSX / React Runtime'
3. Write your JSX in the Custom JS field or in your HTML
4. Generate your APK as normal

The app will load React 18 + Babel from CDN on first page load.

4Writing JSX in Custom JS#

With JSX Runtime enabled, you can write React code directly in the Custom JS field:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

Babel will automatically transpile the JSX before execution.

5Using <script type="text/babel"> in HTML#

If your website or offline HTML uses script tags with JSX, mark them with type="text/babel":

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

Babel Standalone automatically finds and compiles these tags.

6Important Notes#

• Requires internet connection on first load (CDN)
• Adds ~200-500ms startup delay for Babel compilation
• React 18 and ReactDOM 18 are loaded automatically
• Works alongside all other features (ads, push, side menu, etc.)
• For production apps with large codebases, consider using the ZIP upload with esbuild bundling instead - it's faster and works offline