Portfolio engine
Portfolio engine
A serious portfolio surface inside the GrapesJS page editor—Image Portfolio, Gallery, Listing, Video Portfolio, Portfolio Hero, and Advanced storytelling blocks share one renderer, trait system, and embed path from dashboard to live site.
GrapesJS editor
Portfolio blocks in the editor
Portfolio category blocks (plus Portfolio Hero and Before/After) are first-class in the visual editor—each exposes traits for media, layout, and presentation. Pick a block, then a layout mode, to see how the canvas preview maps to shipped behavior.
Layout / display modes (traits)
Portfolio
Uniform columns with consistent tile sizing—best for dense libraries and predictable rhythm across the page.
What the Portfolio Engine Powers
Runtime and editor capabilities you lean on every week—not a bullet list of buzzwords, but the surfaces revenue and client trust ride on.
Media & presentation
Rendering engine
Grids, carousels, masonry, and hero storytelling share responsive srcsets, pagination, and performance defaults tuned for real galleries. Not demo pages that fall apart under real libraries.
Media & presentation
Lightbox system
Geometry, presets, captions, thumbnails, zoom, and video paths behave the same in embeds, PDPs, and long-scroll marketing pages. So the viewing experience matches the craft—not a generic popup.
Distribution & scale
Embedding layer
One portfolio story runs on site pages, blogs, client surfaces, and commerce contexts without rebuilding three experiences. Curate once; reuse everywhere the product connects.
Distribution & scale
Listing & large libraries
Portfolio Listing composes child embeds for each gallery; grid, list, and tab layouts keep navigation obvious as collections grow. Each child keeps its own display traits while the parent controls presentation.
Editor & product glue
GrapesJS composition
Blocks register with component types, trait sidebars, and canvas previews so authors configure behavior instead of pasting embed codes. The editor stays aligned with what ships.
Editor & product glue
SSR + hydration
Public pages resolve the same data attributes and markers the editor saves. Fewer “works in preview only” surprises for clients when they hit the live site.
Before a connected platform
- Different gallery code on the marketing site vs. client delivery
- Lightbox that ignores phones, captions, or EXIF when it matters
- Embeds that break when you change one CDN URL
After you standardize here
- One portfolio renderer across embeds, site, and client-facing surfaces
- Lightbox behavior that matches the moment—review, spectacle, or mobile sheet
- Curate once; reuse layouts without rebuilding three experiences
Swipe sideways for more
Systems inside systems
Grouped rails—not three repeating card sections. Workflows set rhythm; clusters carry depth.
Compose in GrapesJS
Drop portfolio blocks into sections and columns; pick portfolios, layouts, and media from traits instead of one-off embed code.
Tune layout per block
Image Portfolio exposes grid, masonry, carousel, and hero; Portfolio Listing adds grid, list, and tab shells with child embeds for per-gallery display.
Open the lightbox
Presets, captions, thumbnails, counter, zoom, and video paths stay consistent whether the story lives on a PDP, blog, or marketing page.
Ship through the same pipeline
Saved page HTML, SSR markers, and hydrated React surfaces align so what you edit is what the public site renders—no parallel gallery stack.
Every layout is a decision about attention—not a skin on the same grid.
- Grid, masonry, carousel, hero, before/after, and video-forward presentations
- Pagination modes for large libraries—performance and clarity over infinite scroll by default
- EXIF and metadata where it supports the story, not as clutter
Continuity across the business
The difference isn't one feature. It's what happens when publishing, commerce, media, and delivery stop behaving like separate products or plugins.
Portfolios read as static pages
they read as experiences with intentional viewing geometry
Lightbox is a generic popup
it becomes a system with presets, captions, and performance you can trust
Embeds are fragile one-offs
they become a reusable presentation layer across site, PDP, and blog
Ready when you are
Compare plans, then bring this surface online with the rest of your creative operating system.