grapesjs-vietsub – npm Package Overview – Socket

Table of contents

Features

BlocksStyle ManagerLayer Manager
Code ViewerAsset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• NPM
  • npm i grapesjs-vietsub
• YARN
  • yarn add grapesjs-vietsub

For the development purpose you should follow instructions below.

Usage

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
components: '<div class="txt-red">Hello world!</div>',
style: '.txt-red{color: red}',
});
</script>


For a more practical example I’d suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Plugins

Extensions

• grapesjs-plugin-export – Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack – Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor – Replaces the built-in RTE with CKEditor
• grapesjs-aviary – Add the Aviary Image Editor (dismissed, use the plugin below instead)
• grapesjs-tui-image-editor – GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic – Basic set of blocks
• grapesjs-plugin-forms – Set of form components and blocks
• grapesjs-navbar – Simple navbar component
• grapesjs-component-countdown – Simple countdown component
• grapesjs-style-gradient – Add gradient type input to the Style Manager
• grapesjs-style-filter – Add filter type input to the Style Manager
• grapesjs-style-bg – Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox – Add the flexbox block
• grapesjs-lory-slider – Slider component by using lory
• grapesjs-tabs – Simple tabs component
• grapesjs-tooltip – Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code – Embed custom code
• grapesjs-touch – Enable touch support
• grapesjs-indexeddb – Storage wrapper for IndexedDB
• grapesjs-firestore – Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss – Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed – Typed component made by wrapping Typed.js library

Presets

• grapesjs-preset-webpage – Webpage Builder
• grapesjs-preset-newsletter – Newsletter Builder
• grapesjs-mjml – Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins