Skip to content
CeynkCeynk
Esc
↑↓navigate↵open⌘Jpreview
On this page

Editor Overview & Grid Architecture

Learn how Ceynk's interactive Bento Grid canvas works across desktop and mobile devices.

Ceynk’s editor is built around an intuitive, visual Bento Grid canvas. Unlike traditional link-in-bio tools that lock you into rigid vertical lists, Ceynk lets you arrange, resize, and style blocks dynamically in 2D space.

Grid Architecture

The editor canvas uses a fluid column grid system tailored for both high-resolution desktop screens and mobile handhelds:

Desktop Canvas (4 Columns)

  • Grid Structure: 4 columns (lg: 4, md: 4)
  • Row Height: 80px per grid unit
  • Grid Margins: 16px horizontal and vertical gutters
  • Card Sizing: Cards can span 1, 2, 3, or all 4 columns wide

Mobile Canvas (2 Columns)

  • Grid Structure: 2 columns (sm: 2, xs: 2)
  • Row Height: 80px per grid unit
  • Grid Margins: 16px gutters
  • Card Sizing: Optimized for comfortable one-handed mobile thumb browsing

Key Editor Features

1. Desktop & Mobile Preview Switcher

Use the device toggle at the top of the editor canvas to switch between Desktop View and Mobile View.

2. Drag & Drop Positioning

Click and drag any card by its handle to move it anywhere on the grid canvas. Cards automatically float upward to form a compact, cohesive Bento layout without overlapping or gaps.

3. Dynamic Card Resizing

Hover over the bottom-right corner of any supported card and drag to resize:

  • 1×1 (XS / Square Icon)
  • 1×2 (Small Card)
  • 2×2 (Medium Bento Box)
  • 2×4 (Large Featured Widget)
  • 4×1 (Full-Width Banner Ribbon)
  • 4×2 (Hero Display)

4. Instant Real-Time Auto-Save

Every change you make — whether moving a card, uploading an image, or modifying a product price — is synchronized and saved in real-time. No manual save button required.

Editor Toolbar Breakdown

[ 🎨 Appearance ]   [ 🔗 Social Icons ]   [ 📱 Device Toggle ]   [ 🚀 Share ]   [ 🌐 Domain ]
  • Appearance: Open the customization drawer to tweak typography, background shaders, card colors, and header styles.
  • Social Icons: Add and reorder icons for up to 18 social networks.
  • Device Toggle: Switch between Desktop (4-column) and Mobile (2-column) previews.
  • Share: Generate your branded QR code, copy your bio link, or export an Apple Wallet pass.
  • Domain: Connect your custom branded domain (yourname.com).

Was this page helpful?