Skip to main content

The Stacks editor adds “what you see is what you get” and Markdown capabilities to textareas. It is available as a separate Editor repository, but requires Stacks’ CSS for styling.

Because of its size, the Stacks editor is bundled independently of Stacks. You can install it a few ways:

The Stacks Editor is available as an NPM package. To make it available in your node modules, npm install @stackoverflow/stacks-editor

Import via Modules or CommonJS

Section titled Import via Modules or CommonJS
import { StacksEditor } from "@stackoverflow/stacks-editor";
// Don’t forget to include the styles as well
import "@stackoverflow/stacks-editor/styles.css";

new StacksEditor(
document.querySelector("#editor-container"),
"*Your* **markdown** here"
);
<!-- Include the bundled styles -->
<link rel="stylesheet" src="path/to/node_modules/@stackoverflow/stacks-editor/dist/styles.css"
/>


<div id="editor-container"></div>

<!-- highlight.js is not included in the bundle, so include it as well if you want it -->
<script src="//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js"></script>

<!-- Include the bundle -->
<script src="path/to/node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>

<!-- Initialize the editor -->
<script>
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-container"),
"*Your* **markdown** here",
{}
);
</script>
<div id="editor-example-1"></div>

<script>
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-example-1"),
"",
{}
);
</script>

Textarea content with tables enabled

Section titled Textarea content with tables enabled
<textarea id="editor-content-2" class="d-none">

</textarea>
<div id="editor-example-2"></div>

<script>
new window.stacksEditor.StacksEditor(
document.querySelector("#editor-example-2"),
document.querySelector("#editor-content-2").value,
{
parserFeatures: {
tables: true,
},
}
);
</script>
Deploys by Netlify