Editor Lore Blocks

Search…
Editor Lore Blocks
Breakdown of what components are supported under the Lore editor
Hyype's platform native lore editor is a variant of widely popular & opensource Editorjs which is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example, Paragraph, Heading, Image, Video, List are all blocks.
Editor blocks
This is aimed at providing flexibility on how you would want to render a block when you display the lore natively in your frontend.
​
A few examples of block json structures are included below:
paragraph
image
video
quote
embed
{
"id": "tbqvAKSuyg",
"type": "paragraph",
"data": {
"text": "<b>There has always been a bit of mystery surrounding this one.&nbsp;&nbsp;</b>"
}
}
{
"id": "IfOVQ2AeDW",
"type": "image",
"data": {
"file": {
"url": "https://media.hyy.pe/700xAUTO/61561912f084510012274814-1635403828014.jpeg"
},
"caption": "Year 2133: Citizen #10082 looking at the vast emptiness of planet Laran",
"withBorder": false,
"stretched": false,
"withBackground": false
}
}
{
"id": "VYvoLmuo0X",
"type": "video",
"data": {
"url": "https://videos.ctfassets.net/znxnw90vc5ew/7uAidRmq7VC7bvTq1Zd8Rx/c821009212f9fcfb1e5052cf0051392a/cover28-timelapse2_1.mp4",
"caption": "",
"autoplay": true,
"controls": true,
"muted": true,
"stretched": false
}
}
{
"id": "_jwh8Miavq",
"type": "quote",
"data": {
"text": "How did it all come to this",
"caption": "- Alien king says to himself",
"alignment": "left"
}
}
{
"id": "TVJQ2E5vmU",
"type": "embed",
"data": {
"service": "youtube",
"source": "https://youtu.be/5GaJOnwTHw8",
"embed": "https://www.youtube.com/embed/5GaJOnwTHw8",
"width": 580,
"height": 320,
"caption": ""
}
}
​
Check out the Editorjs github to get started with creating an editor which matches your need. Or you can use the Hyype Editor (coming soon) react component with the entire lore-posting workflow baked in.
Supported block types
Here are the block types which are supported via this endpoint while creating a lore:
Text and typography
​@editorjs/paragraph — text block base tool
​@editorjs/header — header block
​@editorjs/quote — tool for quotes
​@editorjs/delimiter — delimiter tool
Lists
​@editorjs/list — ordered or unordered (bulleted) lists
Media & Embed
​@editorjs/image — image block. Custom server-side integration required to upload into a media stack like Arweave or IPFS.
​@editorjs/simple-image — add images to article by pasting image URLs. no server-side uploader required.
​@editorjs/link — links with preview. Customer server-side integration required to generate link previews.
​@editorjs/embed — pasted patterns handling and inserts iframe with embedded content.
----
Useful Libraries
JavaScript
​editorjs-parser — a library to parse editorjs clean data to HTML in Node and Browser
​editorjs-html — a utility to parse editorjs block data to HTML
Vue.js
​vue-editor-js — editorjs for Vue users
React
​react-editor-js — the unofficial editorjs component for React
​@stfy/react-editor.js — React wrapper component for editorjs
​editorjs-blocks-react-renderer - React component to render blocks to semantic HTML5 tags
Angular
​@tinynodes/ngx-editorjs — This library provides Angular support for EditorJS.
​
Post Milestone Lore
Example 1 - Text, Images & Link
Last modified 3mo ago
Export as PDF
Copy link
On this page
Supported block types
Useful Libraries