Skip to main content


@babel/standalone provides a standalone build of Babel for use in browsers and other non-Node.js environments.

When (not) to use @babel/standalone

If you're using Babel in production, you should normally not use @babel/standalone. Instead, you should use a build system running on Node.js, such as Webpack, Rollup, or Parcel, to transpile your JS ahead of time.

However, there are some valid use cases for @babel/standalone:

  • It provides an easy, convenient way to prototype with Babel. Using @babel/standalone, you can get started using Babel with just a simple script tag in your HTML.
  • Sites that compile user-provided JavaScript in real-time, like JSFiddle, JS Bin, the REPL on the Babel site, JSitor, etc.
  • Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation
  • Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that modern ES provides.
  • Other non-Node.js environments (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).


There are several ways to get a copy of @babel/standalone. Pick whichever one you like:

  • Use it via UNPKG. This is a simple way to embed it on a webpage without having to do any other setup.
    <script src=""></script>
  • Install it manually:
    npm install --save @babel/standalone

Script Tags

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx:

<div id="output"></div>
<!-- Load Babel -->
<script src=""></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById("output").innerHTML = getMessage();



Added in: v7.10.0

If you want to use your browser's native support for ES Modules, you'd normally need to set a type="module" attribute on your script tag.

With @babel/standalone, set a data-type="module" attribute instead, like this:

<script type="text/babel" data-type="module">


Use the data-presets attributes to enable builtin Babel presets. Multiple values are comma separated:

<script type="text/babel" data-presets="env,react">

Most popular presets are: env, react, typescript, flow. You can also use Babel.availablePresets to query available presets.

If you want to pass additional options, refer to the custom presets section.


Use the data-plugins attribute to enable builtin Babel plugins. Multiple values are comma separated.

<script type="text/babel" data-plugins="proposal-class-properties">

See here for a list of builtin plugins in @babel/standalone. You can also access the list from Babel.availablePlugins.

If you want to add custom plugins, refer to the custom plugins section.


Loading external scripts via src attribute is supported too:

<script type="text/babel" src="foo.js"></script>


You can also set the async attribute for external scripts.

<script type="text/babel" src="foo.js" async></script>


Load babel.js or babel.min.js in your environment. This will expose Babel's API in a Babel object:

var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ["env"] }).code;

Note that config files don't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform.


custom plugins

Custom plugins and presets can be added using the registerPlugin and registerPreset methods respectively:

// Simple plugin that converts every identifier to "LOL"
function lolizer() {
return {
visitor: {
Identifier(path) { = "LOL";
Babel.registerPlugin("lolizer", lolizer);

Once registered, you can either use the custom plugin in an inline script:

<script type="text/babel" data-plugins="lolizer">

Or you can use the plugin with Babel.transform:

var output = Babel.transform("function helloWorld() { alert(hello); }", {
plugins: ["lolizer"],
// Returns "function LOL() { LOL(LOL); }"

custom presets: passing options to built-in presets/plugins

If you want to pass options to builtin plugins and presets, you can create a new preset and pass these options inside the preset.

// Define a preset
Babel.registerPreset("env-plus", {
presets: [[Babel.availablePresets["env"], { loose: true }]],
plugins: [
{ version: "2023-01" },

Once registered, you can use this preset in an inline script:

<script type="text/babel" data-presets="env-plus">