Skip to content
Use JSX in HTML
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML JSX pHTML

NPM Version Build Status Support Chat

pHTML JSX lets you use JSX in HTML.

<!doctype html>
<>
  <html lang="en" dir={dir}>
    <head>
      <title>pHTML JSX</title>
    </head>
    <body>
      <p class={pClass}>Hello, {name}!</p>
    </body>
  </html>
</>

<!-- using { dir: "ltr", pClass: "foo", name: "World" } becomes -->

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <title>pHTML JSX</title>
  </head>
  <body>
    <p class="foo">Hello, World!</p>
  </body>
</html>

Alternatively, a jsx attribute can toggle an existing element.

<!doctype html>
<html lang="en" dir={dir} jsx>
  <head>
    <title>pHTML JSX</title>
  </head>
  <body>
    <p class={pClass}>Hello, {name}!</p>
  </body>
</html>

<!-- becomes -->

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <title>pHTML JSX</title>
  </head>
  <body>
    <p class="foo">Hello, World!</p>
  </body>
</html>

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/jsx

Node

Add pHTML JSX to your project:

npm install @phtml/jsx --save-dev

Use pHTML JSX to process your HTML:

const phtmlJsx = require('@phtml/jsx');

phtmlJsx.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlJsx = require('@phtml/jsx');

phtml([
  phtmlJsx(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML JSX runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

data

The data option defines an object whose properties will be accessible as global variables within JSX fragments.

transformOptions

The transformOptions option defines the transform options provided to Babel. By default, these options include the plugins @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-react-jsx and @babel/plugin-transform-react-jsx-source.

plugins

The plugins option defines Babel plugins that will run after JSX transformations.

beforePlugins

The plugins option defines Babel plugins that will run before JSX transformations.

You can’t perform that action at this time.