更快发货到生产:葡萄业新动态JS Shadcn

让你的页面构建器强化!GrapesJS Shadcn 增加了实时拖曳预览、富文本/命令、动态数据和画布预设,以加快生产环境的发布速度。

Blocomposer
Blocomposer
2026年6月11日2 天前
阅读约 4 分钟269 次浏览
Building a visual page builder can trick you into spending weeks pixel-pushing the editor UI instead of refining your core product. GrapesJS handles the heavy lifting under the hood, and our GrapesJS Shadcn wrapper provides that polished, professional look right out of the box.
Our latest release focuses entirely on removing development friction, polishing user experience, and packing the editor with powerful, data-driven features. Here is a breakdown of what’s new.

Built for Production Speed

We’ve implemented various bug fixes and UI/UX improvements across the entire workspace to ensure a seamless workflow.

This release is laser-focused on one main goal: getting users to production quickly. Instead of leaving you with a blank slate, we’ve baked in sensible presets and UI layout patterns that we've found improve real-world UX over years of building template-based editors.

Smart Text Editing & Math Formulas

The Rich Text Editor (RTE) received two massive functionality upgrades:

KaTeX Integration: 

You can now natively render and edit complex mathematical formulas directly on the canvas using KaTeX syntax.

Katex formulasVariable Insert Command: 

Typing / inside the text editor opens a command menu, letting you quickly insert dynamic variables from connected datasources.

Text variable

Dynamic Datasources & Selector Fixes

Connecting design to data is now much more robust:

  • Selector Stability: We’ve fixed legacy issues related to renaming CSS selectors, ensuring your design system doesn't break during layout changes.

  • Data-Bound Properties: Traits and styles can now connect directly to datasource values. You can map component attributes (like an image URL or text alignment) dynamically based on the active dataset.
    Data bound properties

Component Dragging & Custom Blocks

We completely re-architected how blocks interact with the canvas:

  • Sensible Defaults: New custom default blocks come equipped with predictable empty states, pre-configured traits, and most relevant style properties.

  • Visual Drag Previews: No more dragging blind. As you drag a component from the side panel onto the canvas, you will see a live preview of the element exactly where it's going to land.

Advanced Charts, Tables, & Custom Selects

To showcase the deeper capabilities of our framework, we have introduced two major components built on top of custom canvas spots and traits:


The Chart Component: 

Visually plot data directly in the page layout.

Charts

The Table Component: 

Effortlessly build structured rows and columns.

Table component

  • Select Options Trait UI: We’ve rolled out a sleek, custom trait UI specifically for configuring select options, making long lists of drop-down properties simple to manage.

Lightning-Fast Building with Canvas Spots

We want to minimize repetitive drag-and-drop actions. This update introduces contextual canvas spots that let you click to instantly add components before or after a selected element.

Additionally, we've optimized Columns: when a column layout is empty, you can add child components inside with a single click, no dragging required. Resizable components also now display exact live dimensions as you scale them, giving you immediate spatial awareness.

Canvas spots

Visual Polish & Better Icons

Finally, we went through the interface to standardize and improve icon assets. The layout looks sharper, actions feel more intuitive, and the overall visual feedback aligns perfectly with modern UI expectations.

Ready to try it out? Get the latest version here

发布于 2026年6月11日
更新于 2026年6月13日
🔌 GJS.Market

在寻找 GrapesJS 插件吗?

超过 100 款精选插件、预设与模板 —— 由社区精挑细选并持续维护。

分享本文TwitterFacebookLinkedIn
发布平台
Blocomposer
Blocomposer
访问店铺 →

更多来自 Blocomposer

发现更多精彩文章,及时获取最新内容。

查看全部文章

来自 Blocomposer 的付费插件

由该作者精心打造的精选付费插件。

访问店铺 →