Babel transformer preset for React Expression Syntax


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
50May 24, 2021Jan 23, 2018Minified + gzip package size for @expressive-react/babel-plugin-transform-xjs in KB



Babel plugin for transforming do{ } statements into React compatable markup. Most comperable to babel-plugin-transform-react-jsx, with a completely different syntax at play. May be used along side JSX and it's respective babel-plugin (recommended) or even as a feature-complete replacement, depending on your needs.


It is recommended you apply a preset rather than using this plugin directly.

Choose package for your current environment, web, native, or next for NEXT.js.

npm install @expressive-react/preset-*


Note that babel infers babel-preset so you should replace * with only the keyword of package you've installed.

    "presets": [

Entry Points

babel-plugin-transform-xjs will enter context upon encountering the DoExpression e.g. do{} in various contexts. It will also do so for any method with the name "do" e.g. do(){}

For more information on actual syntax, consult the main repo.

Element Expressions

let element = do {

//equivalent to in JSX

let element = (


let element = React.createElement("div", {})

Arrow Components

let SayHi = ({ to }) => do {
    div `Hello ${ to }`;

//equivalent to in JSX

let SayHi = (props) => (
    <div>Hello {props.to}</div>


let SayHi = function(props) {
    return React.createElement("div", {}, "Hello " + props.to)

Do Component Method

class Greet extends React.Component {
        SayHi(to `World`)

//equivalent to in JSX

class Greet extends React.Component {
        var { props } = this;
        return (
            <SayHi to="World" />


This plugin will conflict with babel-plugin-do-expressions. Make sure your project is not using it or the following presets as they do inherit this plugin.


MIT License

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.