madebymany/sir-trevor-js

★ 4,485JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((sir-trevor-js))
    What it does
      Block-based editor
      Stores content as JSON
      Drag and drop blocks
    Block types
      Text and headings
      Images and video
      Tweets and quotes
    Integrations
      Rails and Django
      Laravel and WordPress
      Custom backends
    Tech
      JavaScript
      MIT license

mindmap root((sir-trevor-js)) What it does Block-based editor Stores content as JSON Drag and drop blocks Block types Text and headings Images and video Tweets and quotes Integrations Rails and Django Laravel and WordPress Custom backends Tech JavaScript MIT license

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace a plain textarea in a CMS with a block editor that stores structured JSON content instead of raw HTML.

USE CASE 2

Add a rich content editor to a Rails, Django, or Laravel app with built-in support for images, embeds, and custom block types.

USE CASE 3

Build a custom content block type to extend the editor with project-specific units like product cards or code snippets.

Tech stack

JavaScriptnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Use freely for any purpose including commercial projects as long as you keep the original copyright notice.

In plain English

Sir Trevor is a JavaScript library that provides a block-based content editor for web pages. Instead of a single text area where you write everything as one blob of text, it lets writers build a page out of discrete content blocks: a paragraph of text here, an image there, a tweet, a video embed, a pull quote. Each block type is independent and can be added, moved, or removed without affecting the others. The editor stores its content as JSON rather than HTML, which makes it easier to save to a database and render differently on different platforms. When a user submits the form, the structured JSON representing all the blocks gets sent to the server instead of a raw HTML string. Installation is done through npm. Using it requires adding a textarea element to an HTML form, then initializing the editor in JavaScript and pointing it at that element. From that point, the textarea is replaced by the block editor interface. The library ships with built-in block types for text, images, tweets, video, quotes, headings, and lists. Custom block types can be added by extending the blocks object, and a list of community-contributed custom block types is maintained on the project wiki. The README lists integrations with several web frameworks including Rails, Django, Laravel, WordPress, and others, so the JSON content format can be consumed on the server side regardless of what backend technology you are using. Sir Trevor was built by the agency Made by Many and is released under the MIT license. The README notes that active development has slowed: tests are included and run as part of the build process, and the project supports modern versions of Chrome, Firefox, and Safari, plus IE11. It uses The Guardian's Scribe library internally for the rich text portions of the editing experience.

Copy-paste prompts

Prompt 1

Integrate Sir Trevor into a Rails form so a blog post body is saved as JSON blocks instead of raw HTML.

Prompt 2

Create a custom Sir Trevor block type for embedding a Twitter thread in the editor.

Prompt 3

Write a server-side renderer in Python Django that turns Sir Trevor stored JSON blocks into HTML for display on a page.

Prompt 4

Set up Sir Trevor with a custom toolbar that only shows text, image, and quote block types for a simplified writing interface.

Open on GitHub → Explain another repo

← madebymany on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.