Minimal Text Editor With JavaScript – composure

Category: Javascript , Text | October 10, 2018
Author: johnchinjew
Views Total: 259 views
Official Page: Go to website
Last Update: October 10, 2018
License: MIT


Minimal Text Editor With JavaScript – composure


composure is a minimalist text editor using pure JavaScript and CSS focused on writing and performance.


  • Automatically saves your writing to the browser.
  • Day and Night modes.
  • Word counter.

How to use it:

Include the necessary JavaScript and CSS files on the web page.

<link rel="stylesheet" href="css/app.css">
<script src="js/app.js"></script>

Create the html for the text editor.

<div id="app" hidden>
  <div id="editor" data-placeholder="..." contenteditable></div>
  <div id="caret"></div>
  <button id="mode-btn" class="ui">NIGHT MODE</button>
  <span id="stats-label" class="ui">
    <span id="autosave-label">SAVED</span> · <span id="wordcount-label">0 WORDS</span> 

Add the mode CSS to the body tag. Done.

<body class="day">



  • Reduce line height
  • Make theme button text correspond to theme

You Might Be Interested In:

Leave a Reply