---
title: Editor Overview & Grid Architecture
description: Learn how Ceynk's interactive Bento Grid canvas works across desktop and mobile devices.
sidebar:
  label: Editor Overview
  icon: layout
---

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:

<CardGroup cols={2}>
  <Card title="Desktop Canvas (4 Columns)" icon="monitor">
    - **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
  </Card>
  <Card title="Mobile Canvas (2 Columns)" icon="smartphone">
    - **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
  </Card>
</CardGroup>

---

## Key Editor Features

1. **1. Desktop & Mobile Preview Switcher**

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

    :::tip Device-Independent Positioning
    You can customize the layout order and card sizes on mobile independently from desktop! Ceynk remembers your positioning preferences for each viewport.
    :::

2. **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. **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. **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`).