diff --git a/.github/ISSUE_TEMPLATE/formatting.md b/.github/ISSUE_TEMPLATE/formatting.md
index c6dd4d3af..4d1086e84 100644
--- a/.github/ISSUE_TEMPLATE/formatting.md
+++ b/.github/ISSUE_TEMPLATE/formatting.md
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 2.3.2**
+**Prettier 2.4.0**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh
diff --git a/.github/ISSUE_TEMPLATE/integration.md b/.github/ISSUE_TEMPLATE/integration.md
index c1eb47a77..392f0594a 100644
--- a/.github/ISSUE_TEMPLATE/integration.md
+++ b/.github/ISSUE_TEMPLATE/integration.md
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 2.3.2
+- Prettier Version: 2.4.0
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3eebeea69..34fccfd16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.4.0
+
+[diff](https://github.com/prettier/prettier/compare/2.3.2...2.4.0)
+
+🔗 [Release Notes](https://prettier.io/blog/2021/09/09/2.4.0.html)
+
 # 2.3.2
 
 [diff](https://github.com/prettier/prettier/compare/2.3.1...2.3.2)
diff --git a/docs/browser.md b/docs/browser.md
index fa1718e0d..8c650329e 100644
--- a/docs/browser.md
+++ b/docs/browser.md
@@ -32,8 +32,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -48,8 +48,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -88,8 +88,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -102,8 +102,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -119,9 +119,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/package.json b/package.json
index 53a8d9665..f91394ac2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.4.0-dev",
+  "version": "2.4.0",
   "description": "Prettier is an opinionated code formatter",
   "bin": "./bin/prettier.js",
   "repository": "prettier/prettier",
diff --git a/website/versioned_docs/version-stable/browser.md b/website/versioned_docs/version-stable/browser.md
index 74659cc1d..8e7dd3001 100644
--- a/website/versioned_docs/version-stable/browser.md
+++ b/website/versioned_docs/version-stable/browser.md
@@ -33,8 +33,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -49,8 +49,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -63,8 +63,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -103,8 +103,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -120,9 +120,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/website/versioned_docs/version-stable/install.md b/website/versioned_docs/version-stable/install.md
index 5c410b42f..aecc7938a 100644
--- a/website/versioned_docs/version-stable/install.md
+++ b/website/versioned_docs/version-stable/install.md
@@ -121,6 +121,8 @@ For example, you can do the following to have Prettier run before each commit:
 
    <!--END_DOCUSAURUS_CODE_TABS-->
 
+> Note: npm **set-script** command requires at least **npm v7.x**. See https://docs.npmjs.com/cli/v7/commands/npm-set-script.
+
 2. Add the following to your `package.json`:
 
 ```json
diff --git a/website/versioned_docs/version-stable/option-philosophy.md b/website/versioned_docs/version-stable/option-philosophy.md
index ed53cd2a3..005c4e56d 100644
--- a/website/versioned_docs/version-stable/option-philosophy.md
+++ b/website/versioned_docs/version-stable/option-philosophy.md
@@ -30,7 +30,7 @@ Options that are easier to motivate include:
 - `--end-of-line` makes it easier for teams to keep CRLFs out of their git repositories.
 - `--quote-props` is important for advanced usage of the Google Closure Compiler.
 
-But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--jsx-bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
+But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
 
 For a long time, we left option requests open in order to let discussions play out and collect feedback. What we’ve learned during those years is that it’s really hard to measure demand. Prettier has grown a lot in usage. What was “great demand” back in the day is not as much today. GitHub reactions and Twitter polls became unrepresentative. What about all silent users? It looked easy to add “just one more” option. But where should we have stopped? When is one too many? Even after adding “that one final option”, there would always be a “top issue” in the issue tracker.
 
diff --git a/website/versioned_docs/version-stable/options.md b/website/versioned_docs/version-stable/options.md
index 31bb06879..6e1c4b3d7 100644
--- a/website/versioned_docs/version-stable/options.md
+++ b/website/versioned_docs/version-stable/options.md
@@ -136,7 +136,44 @@ Valid options:
 | ------- | ---------------------- | ------------------------ |
 | `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
 
-## JSX Brackets
+## Bracket Line
+
+Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+
+Valid options:
+
+- `true` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}>
+  Click Here
+</button>
+```
+
+- `false` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}
+>
+  Click Here
+</button>
+```
+
+| Default | CLI Override          | API Override              |
+| ------- | --------------------- | ------------------------- |
+| `false` | `--bracket-same-line` | `bracketSameLine: <bool>` |
+
+## [Deprecated] JSX Brackets
+
+_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
 
 Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).