Grapesjs Paneless
What's Included
- Source code package (project files)
- Production-ready dist build
- Commercial license
- Future updates included
GrapesJS Compatible
Tested with GrapesJS 0.21.x
Source Code Included
Full source + production-ready dist build
Editor Compatible
Designed for the GrapesJS open-source editor
Commercial License
Use in client projects without restrictions
Grapesjs UI preset used in blocomposer.app with other common plugins and configurations to grapesjs to get your website builder up and running quickly. As a preset this works correctly with the provided versions but can also work with previous version if the plugins are also matched correctly. This plugins also provides a framework which can be extended by adding functionality to some of the UI provided. For more information on setup you can check the README.md provided and the sample setup provided in index.html. Provides widgets for adding blocks without having to use drag and drop. This plugin comes with grapesjs-component-icon plugin built in so no need to purchase that separately.
Components
- icon
- shape-divider
- header
- animate
- block-builder
- button-basic
Blocks
- link-block
- quote
- text-basic
- section-block
- span-block
- button-basic
- block-builder
- line-divider
- hero-block
- team
- team-card
- footer
- shape-divider
- header
- icon
- animate
Commands
- left-assets
- left-settings
- page-seo
- adder
- gjs-open-import-webpage
- settings-customHead
- settings-globalCss
- get-current-name
- open-fonts
- clone-page
- add-block
- help
- publish
- set-device-desktop
- set-device-tablet
- set-device-mobile
- canvas-clear
Options
1. `useCloudinary` - Use cloudinary file picker - `true`
2. `showPanels` - Use editor with fixed panels - `false`
3. `staticSettings` - Reposition settings popup when a component is selected - `false`
4. `settingsAnimation` - Animate settings popup when - `true`
5. `hideSettings` - Hide settings by default - `true`
6. `linkBlock` - Extend link block - `{}`
7. `quoteBlock` - Extend quote block - `{}`
8. `textBlock` - Extend text block - `{}`
9. `btnBlock` - Extend button block - `{}`
10. `bldBlock` - Extend block builder block - `{}`
11. `hrBlock` - Extend line divider block - `{}`
12. `heroBlock` - Extend hero block - `{}`
13. `teamBlock` - Extend team block - `{}`
14. `shapedividerBlock` - Extend shape divider block - `{}`
15. `sectionBlock` - Extend section block - `{}`
16. `spanBlock` - Extend span block - `{}`
17. `footerBlock` - Extend footer block - `{}`
18. `headerBlock` - Extend header block - `{}`
19. `animateBlock` - Extend animate block - `{}`
20. `iconBlock` - Extend icon block - `{}`
21. `modalHelpLabel` - Modal help title - `Help`
22. `modalImportTitle` - Modal import title - `Import`
23. `modalImportButton` - Modal import button text - `Import`
24. `modalImportLabel` - Import description inside import modal - `HTML`
25. `importViewerOptions` - Code viewer (eg. CodeMirror) options - `{}`
26. `textCleanCanvas` - Confirm text before cleaning the canvas - `Are you sure to clean the canvas?`
27. `onSave` - Callback when save button is clicked - `editor.store()`
28, `hoverDelay` - Hover delay for block adding widgets, lower value makes hover update faster - `250`
Ratings:
No reviews yet. Be the first to share your experience.
Question and Answers (0)
No question found
Common problems this plugin can help fix
Real community questions on the same topic — see how others worked around them.
- #5263✓ Solved · 4
Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
- #3560💬 4 answers
Customize Blocks Styles - grapesjs Angular
- #3258💬 4 answers
Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks
- #3119💬 4 answers
How to create custom block made of grapesjs components?
