Browser
Run Prettier in the browser using its standalone version. This version doesn’t depend on Node.js. It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.
The standalone version comes as:
- ES modules:
standalone.mjs
, starting in version 3.0 (In version 2,esm/standalone.mjs
.) - UMD:
standalone.js
, starting in version 1.13
The browser
field in Prettier’s package.json
points to standalone.js
. That’s why you can just import
or require
the prettier
module to access Prettier’s API, and your code can stay compatible with both Node and the browser as long as webpack or another bundler that supports the browser
field is used. This is especially convenient for plugins.
prettier.format(code, options)
Required options:
parser
(orfilepath
): One of these options has to be specified for Prettier to know which parser to use.plugins
: Unlike theformat
function from the Node.js-based API, this function doesn’t load plugins automatically. Theplugins
option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in https://unpkg.com/browse/prettier@3.4.2/plugins/. Note thatestree
plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.You need to load the ones that you’re going to use and pass them to
prettier.format
using theplugins
option.
See below for examples.
Usage
Global
<script src="https://unpkg.com/prettier@3.4.2/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.4.2/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins: prettierPlugins,
});
})();
</script>
Note that the unpkg
field in Prettier’s package.json
points to standalone.js
, that’s why https://unpkg.com/prettier
can also be used instead of https://unpkg.com/prettier/standalone.js
.
ES Modules
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.4.2/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.4.2/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins: [prettierPluginGraphql],
});
</script>
AMD
define([
"https://unpkg.com/prettier@3.4.2/standalone.js",
"https://unpkg.com/prettier@3.4.2/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins,
});
});
CommonJS
const prettier = require("prettier/standalone");
const plugins = [require("prettier/plugins/graphql")];
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins,
});
})();
This syntax doesn’t necessarily work in the browser, but it can be used when bundling the code with browserify, Rollup, webpack, or another bundler.
Worker
importScripts("https://unpkg.com/prettier@3.4.2/standalone.js");
importScripts("https://unpkg.com/prettier@3.4.2/plugins/graphql.js");
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins: prettierPlugins,
});
})();
Parser plugins for embedded code
If you want to format embedded code, you need to load related plugins too. For example:
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.4.2/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
parser: "babel",
plugins: [prettierPluginBabel, prettierPluginEstree],
}),
);
// Output: const html = /* HTML */ `<DIV> </DIV>`;
</script>
The HTML code embedded in JavaScript stays unformatted because the html
parser hasn’t been loaded. Correct usage:
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.4.2/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.4.2/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
parser: "babel",
plugins: [prettierPluginBabel, prettierPluginEstree, prettierPluginHtml],
}),
);
// Output: const html = /* HTML */ `<div></div>`;
</script>