yveskalume
a09538a3c9
- Introduced a variety of templates including "Code Snippet", "Code with Title", "Before & After", "Code Explanation", "Social Tip Card", "Code Flow", and "LinkedIn Carousel". - Each template includes detailed properties such as background styles, elements, and code examples. - Enhanced user experience with visually appealing gradients and structured layouts for better presentation of code.
YvCode
A lightweight code-canvas editor to create export-ready images for social media (code blocks, text, arrows, backgrounds, and branding).
Features
- Canvas editor built on Konva (move/resize/rotate elements)
- Elements: Code block, Text, Arrow
- Backgrounds: solid + gradient, optional brand strip
- Branding overlay (name/title/avatar + social handles)
- Layers panel (reorder, lock, hide/show)
- Export image: PNG or JPEG (2x)
- Project files: export/import as JSON
- Recent projects list (local)
- Undo/Redo + keyboard shortcuts
Keyboard shortcuts
- New canvas:
⌘N - Open project JSON:
⌘O - Export project JSON:
⌘S - Undo / Redo:
⌘Z/⇧⌘Z - Duplicate selected:
⌘D - Delete selected:
Backspace/Delete - Zoom in/out:
⌘+/⌘- - Toggle grid:
⌘; - Tools: Select
V, CodeC, TextT, ArrowA - Deselect:
Esc
Getting started
Requirements: Node.js (recommended: latest LTS)
npm install
npm run dev
Then open the URL printed by Vite.
Scripts
npm run dev— start the dev servernpm run build— typecheck and build for productionnpm run preview— preview the production buildnpm run lint— run ESLint
Docs
- Product spec: docs/spec.md
- UI design notes: docs/design.md