ContentTools

ContentTools is a JavaScript library for building WYSIWYG editors for HTML content, maintained by GetmeUK and published to bower, npm, and jsdelivr. It lets you embed an editable HTML region in a web page so users can format text and images in place.

What is ContentTools?

ContentTools is a standalone JavaScript library that turns HTML content into a WYSIWYG editing surface. It takes HTML as input, renders it as an editable region in the browser, and gives users a toolbar to apply formatting; the resulting edited HTML is then available to save back to your application. The project is developed by GetmeUK and has a separate roadmap repository for the 2.x version. It is distributed through bower (bower install --save ContentTools), npm (npm install --save ContentTools), and the jsdelivr CDN (for example https://cdn.jsdelivr.net/npm/[email protected]/build/content-tools.min.js).

Key Features

• In-place HTML editing — Users can edit the actual HTML content of a page without a separate admin interface.
• Framework-agnostic — ContentTools is a plain JS library with no dependency on a specific MVC framework, so it can be dropped into any web project.
• Multiple install methods — Installation is supported via bower, npm, or direct script tag from jsdelivr.
• SASS-based styling — The project's CSS is generated from SASS files, allowing you to build a custom stylesheet or override font and image references in the default CSS (the default CSS uses relative file paths).
• Cross-browser target — The library aims to support IE9+, Chrome, and Firefox. There are visual differences in IE9 because the UI uses CSS animations.
• Automated build and test tooling — The source is built with Grunt (grunt build) and tested with Jasmine; tests can be run from the command line with grunt jasmine or by opening SpecRunner.html in a browser.

Who is it for?

• Web developers who need to add content-editing capabilities to an existing site or application without adopting a full CMS.
• Product teams building custom content tools that require a WYSIWYG layer and want to control the styling with SASS.
• Maintainers of HTML-heavy projects who need a library that works in older browsers such as IE9 for content editing.

What can you do with ContentTools?

• Add in-page editing to a blog, documentation site, or dashboard so authorized users can edit text, links, and images directly on the page.
• Build a custom editor theme by modifying the provided SASS files and generating your own CSS instead of using the default stylesheet.
• Run a test suite for your edits using Jasmine and Grunt so you can confirm the library behaves correctly in IE9, Chrome, and Firefox.