# Zulink ## OpenGraph Designer > Category: Design and analytics --- ## Pages ### Getting started - [What is Zulink?](https://docs.zulink.co/getting-started/what-is-zulink) - [Quickstart](https://docs.zulink.co/getting-started/quickstart) - [Custom domains](https://docs.zulink.co/getting-started/custom-domains) ### Links - [Creating links](https://docs.zulink.co/links/creating-links) - [Targeting](https://docs.zulink.co/links/targeting) - [A/B testing](https://docs.zulink.co/links/a-b-testing) - [Link security](https://docs.zulink.co/links/link-security) - [Social previews](https://docs.zulink.co/links/social-previews) ### Design and analytics - [OpenGraph Designer](https://docs.zulink.co/design-and-analytics/opengraph-designer) - [Analytics](https://docs.zulink.co/design-and-analytics/analytics) ### Team and plans - [Members and invitations](https://docs.zulink.co/team-and-plans/members-and-invitations) - [Roles and permissions](https://docs.zulink.co/team-and-plans/roles-and-permissions) ### AI agents - [MCP Server](https://docs.zulink.co/ai-agents/mcp-server) --- # OpenGraph Designer The OpenGraph Designer is a canvas editor for the preview images your links show when they are shared. You build a design once, and every link that uses it gets its own image with its own title and description rendered into your layout. Open it from the sidebar, give a new design a name, and the editor opens straight away. ## The canvas A design starts at 1200 × 630 pixels, the size the social platforms expect. You can change the dimensions in the canvas section of the inspector, anywhere between 200 and 4000 pixels per side, and set the background to a solid color or a gradient. Around the canvas sits the **safe area**: a margin per side that elements snap to, so headlines and logos keep a consistent distance from the edge. It is a guide for you while editing and never appears in the finished image, and you can hide it without losing the snapping. ## Elements The toolbar at the bottom inserts five kinds of element: **text**, **rectangle**, **circle**, **line** and **image**. A design holds up to 100 of them, stacked back to front. Text is the interesting one, because it has a **source**: | Source | What it renders | | --- | --- | | OpenGraph Title | The title of whichever link uses the design | | OpenGraph Description | The description of that link | | Custom text | Exactly what you type, on every link | While you are editing, the two dynamic sources show placeholder text so you can judge the layout; at render time they are filled from the link. That is what makes one design serve hundreds of links. Images are uploaded from your computer and belong to the design. They are compressed in the browser before they are stored. ## The inspector The right-hand panel has three tabs: **Style** for the selected element, **Layers** for the stacking order, and **Guides** for the safe area. What Style offers depends on the selection: - **Position and size**: x, y, width, height, rotation and opacity. - **Typography**: font family from fourteen faces, size, weight, line height, letter spacing, horizontal and vertical alignment, and a line-balancing option that avoids ugly last lines. - **Fill**: color for shapes and text. - **Appearance**: corner radius, border width and color, and a blend mode such as multiply, screen or overlay. - **Line**: thickness. - **Image**: how the picture fills its box, as cover, contain or stretch. An image can also be replaced in place, keeping its position and size. With several elements selected, shared values are editable together and differing ones show as *Mixed*. ## Working on the canvas Drag to move, use the handles to resize, and the corner handles to rotate. Dragging a marquee across the canvas selects everything it touches. While you move an element, Zulink snaps it to the edges and centers of the other elements, to the canvas and to the safe area, and shows the distances to its neighbours so equal spacing is easy to hit. | Shortcut | Action | | --- | --- | | Arrow keys | Nudge by one pixel, ten with Shift | | `Cmd`/`Ctrl` + `Z` | Undo, redo with Shift | | `Cmd`/`Ctrl` + `C`, `X`, `V` | Copy, cut, paste. Image files from the clipboard are inserted as image elements | | `Cmd`/`Ctrl` + `D` | Duplicate the selection | | `Cmd`/`Ctrl` + `S` | Save | | `Delete` / `Backspace` | Remove the selection | | `Esc` | Deselect | The header shows an **Unsaved** marker while there are pending changes. Nothing is written until you save. ## Reusing designs elsewhere A design can be exported as a ZSON file and imported into another project, which is the way to move a template between projects or keep a copy outside Zulink. Import and export sit in the design list's action menu. ## Using a design on a link Open a link, go to its **Open Graph** tab, and pick the design under **Templates**. The image is rendered when you save the link and re-rendered whenever the link's text or the design itself changes. See [Social previews](https://docs.zulink.co/links/social-previews) for the rest of that tab. Deleting a design does not break the links that used it. They simply fall back to whatever else the link provides. ## Availability The designer is available from the Pro plan upwards, with a limit on how many designs a project may keep. Generated images count against the project's preview image storage. See [Plans and limits](https://docs.zulink.co/team-and-plans/plans-and-limits).