Skip to content
This repo shows how to integrate the slatejs editor into a re-frame (and reagent) clojurescript app
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

re-frame and reagent and slatejs

This repo contains example code illustrating how to integrate the slatejs editor with a re-frame (and reagent) clojurescript app.

It's an advanced use case with the following features:

  • Multiple editable sections exist on the page. One can be edited at a time. Select a section to edit by clicking on its card.
  • Shared toolbar, separate from the editor. Acts on the currently selected editor.
  • Bold and italic formatting via toolbar or keyboard shortcuts.
  • Persistence of edited text into re-frame app-db (as HTML).
  • Used in production with 1K editable sections on a single page.


You can view the demo.

Some notes

Integrating SlateJS into re-frame/reagent is a bit tricky for advanced uses. There are some portions that are not idiomatic re-frame/reagent. E.g., we use regular atoms to cache editor values, and the editor reference.

The code is well commented. I would start exploring at (src/cljs/rrs/ui/slatejs/views.cljs)[] where the SlateJS editor is being rendered.

npm dependencies are handled separately and included via bundle.js file. The approach follows Tomer Weller's recipe.

Play with the code yourself


Cd into <app_root>

lein clean
rlwrap lein figwheel dev

Figwheel will automatically push cljs changes to the browser.

Wait a bit, then browse to http://localhost:3449.


We use npm and webpack separately from CLJS. We isolate this in a folder named npm-webpack. This is required so that there is no node_modules folder in <app_root> as cljs would pick it up and auto process it as module dependencies. We'd end up with those dependencies twice.

Cd into <app_root>/npm-webpack

npm install
npm run watch

This will compile all dependencies into resources/public/js/bundle.js.

Include this file in index.html.

Run cljfmt

lein cljfmt check src/cljs/


lein cljfmt fix src/cljs/

Production Build

To compile clojurescript to javascript:

lein clean
lein with-profile production cljsbuild once min
You can’t perform that action at this time.