Portfolio engine

Curate once. Publish everywhere.

Manage collections from a single dashboard and instantly display them as galleries, stories, portfolio pages, and immersive viewing experiences across your website.

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.

Public gallery URL

Dedicated portfolio pages

Every collection can live on your domain as a dedicated gallery page, easy for clients to bookmark, share, and return to. The layouts below show how proofing, archives, and portfolio marketing actually feel to visitors.

https://yoursite.com/portfolio/f8-and-be-there

Design family

Layout

Selection-driven layouts with a main stage and thumb navigation.

Portfolio engine

Dedicated public gallery URLs with zero-runtime-latency rendering for premium photography and media delivery.

Organize collections into three design families—grid galleries, immersive browsing, and chronological timelines—each tuned for how clients review work.

Public portfolio pages →

Image pane paired with a caption reading pane. Long titles and descriptions stay visible beside the frame.

Motion presentation

Animated portfolio templates

When a static grid is not enough, motion templates present your work with depth, movement, and a clear hero frame. Same domain, same brand. The live previews below match what visitors see on published portfolio pages.

https://yoursite.com/portfolio/f8-and-be-there

Presentation model

Template

Linear carousel layouts with depth and side previews.

Horizontal path with rotating side previews. The curved shelf drops slightly below stage so flanks read left and right.

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.

Distribution & scale

Public gallery pages

Turn any media collection into a fully branded client destination using bespoke layout experiences engineered for specific business workflows. Choose from proofing layouts, chronological archives, or adaptive grids.

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

Public gallery URLs

Dedicated portfolio pages

Publish production-ready, SEO-optimized portfolio pages directly under your brand's root URL—leveraging split-panes for fast client proofing, chronological timelines for deep asset archives, or adaptive grids for digital marketing.

  • Shareable /portfolio/slug
  • Grid / immersive / timeline families
  • Site defaults + per-collection overrides
  • Same lightbox and photo-detail paths when enabled

Advanced

Advanced storytelling blocks

Rich visual narratives without separate tooling. Comparison layouts, hero sequences, and video-forward storytelling blocks work inside the same editor and rendering system as core portfolio components.

  • Before/after and reveal-style presentation blocks
  • Hero storytelling tied into shared layout systems
  • Advanced experiences without isolated widget stacks

Distribution

One portfolio system across the platform

Reuse the same portfolio story across every surface. Portfolios can appear inside marketing pages, commerce flows, client delivery, and editorial content without rebuilding layouts for each context.

  • Shared portfolio behavior across site and commerce surfaces
  • Consistent rendering between embeds and standalone pages
  • Portfolio-level sharing and access behavior when enabled

Editor → live site

Editor and live site stay aligned

What authors configure is what visitors actually experience. Portfolio layouts, captions, motion, and viewing behavior are designed to render consistently from editor preview to public page.

  • Shared rendering logic between canvas and production output
  • Responsive presentation across mobile, desktop, and fullscreen views
  • Fewer preview-only surprises during publishing and client review

Lightbox

Lightbox built for storytelling

Viewing flows designed for premium visual work. Captions, zoom, thumbnails, motion, and video playback stay consistent across galleries, PDPs, and long-scroll editorial layouts.

  • Presentation modes tuned for review, browsing, or fullscreen viewing
  • Smooth navigation across large image sets
  • Decode and preload behavior optimized for swipe-heavy experiences

Traits

Traits, not embed code

Presentation controls belong in the editor UI. Editors configure grids, masonry, spacing, captions, and display modes through structured controls instead of manual markup edits.

  • Portfolio and listing blocks expose dedicated trait panels
  • Layout modes map directly to production-ready renderers
  • Visual adjustments stay predictable across breakpoints

Composition

Nested portfolio composition

Large collections stay organized without flattening everything. Listing surfaces can compose multiple child portfolios while preserving independent presentation behavior inside each gallery.

  • Parent listings control overall navigation and structure
  • Child galleries retain their own layout and display traits
  • Pagination and rendering defaults support growing libraries

Swipe sideways for more

Systems inside systems

Grouped rails—not three repeating card sections. Workflows set rhythm; clusters carry depth.

Publish a gallery URL

Turn on Public gallery, set a slug, tune layout under Settings → Portfolio (or override per collection), and share the live link for proofing or marketing.

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
  • Split pane, book spread, and stage carousel for one-at-a-time viewing
  • Timeline sections grouped by shoot date for archives and travel
  • Optional cover hero: full banner, short banner, or none
  • 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

Galleries only exist as layout blocks inside a page builder

every media collection is natively capable of driving its own standalone, premium brand experience

Ready when you are

Compare plans, then bring this surface online with the rest of your creative operating system.

Subscribe nowDocumentation