GrapesJS topics
12 short topics in Extensions Plugins CLI and Developer Tools. Each one is a single focused exercise with a clear piece of evidence at the end.
12 topics, one exercise each.
Work through them in order, or jump to the one you need.
These are draft topic outlines (draft; instructor review pending). Full lessons follow after review; ask Ajay if you need a topic sooner.
- 01
Page and component tree
Demonstrate page and component tree in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 02
Component types and traits
Demonstrate component types and traits in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 03
Styling and selector representation
Demonstrate styling and selector representation in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 04
Block and template composition
Demonstrate block and template composition in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 05
Responsive preview modes
Demonstrate responsive preview modes in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 06
Asset management
Demonstrate asset management in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 07
Editor command and plugin extension
Demonstrate editor command and plugin extension in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 08
Project serialization and storage
Demonstrate project serialization and storage in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 09
HTML and CSS export
Demonstrate html and css export in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 10
Content validation and sanitization
Demonstrate content validation and sanitization in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 11
Application and CMS integration
Demonstrate application and cms integration in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 12
Editor and generated-site regression checks
Demonstrate editor and generated-site regression checks in a focused GrapesJS example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course →
More in Editors visualisation and component tooling.
You have the curiosity.
Let’s turn it into capability.
Start with a practical workshop or bring a specific question to Ajay.