Can I vibecode Slides.com?
price variesyou'd save no subscriptionbuild time one sittingcategory presentationsreplaced by 0 people
YES
MOATexecution polishcollaboration
Slides.com's solo core is compact: build a browser-based web presentations editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export. A competent builder can reach a useful personal version in one sitting, while the paid product mainly wins on interaction polish, collaboration.
In-List Ad$79/30 days
promote your product in the vibecoded listThe Build Prompt
copy it and go buildready to paste · 2,759 chars
You are an elite frontend developer tasked with building a premium, developer-friendly presentation editor inspired by Slides.com. The application must be built using React, TypeScript, and modern web standards, focusing on a clean HTML/CSS output structure and a breathtakingly fluid user interface. Core Features & Functionality: 1. **Grid-Based Navigation**: Implement a dual-axis presentation structure where slides can progress horizontally (chapters) and vertically (details within a chapter), providing a 2D map of the presentation. 2. **WYSIWYG Slide Editor**: A robust visual editor supporting text formatting, code blocks with syntax highlighting, image uploads, and interactive media embeds. 3. **Developer Mode**: A feature allowing users to toggle to a raw HTML/CSS/Markdown view of the current slide, enabling advanced customizations. 4. **Style Configuration**: Comprehensive controls for global presentation styling, including background colors, custom fonts, transition effects (fade, slide, convex, concave), and themes. 5. **Speaker View**: A separate presentation mode window featuring a timer, speaker notes, and a preview of the upcoming slide. Design & Aesthetics: - The application must feature a hyper-modern, minimalist aesthetic that stays out of the user's way, maximizing the space dedicated to the slide being edited. - Incorporate a sleek, dark-mode default UI with subtle neon accents and glassmorphic floating toolbars that appear contextually on element selection. - Animations must be buttery smooth; use CSS transitions or Framer Motion for UI elements, and ensure the slide transitions during playback are highly performant. - Typography should be striking and modern, utilizing fonts like Montserrat or Roboto, with precise control over line-height and letter-spacing. - Include a beautiful, interactive minimap in the corner to help users navigate the 2D grid structure. Technical Requirements: - Output Architecture: The underlying presentation engine should ideally generate clean HTML structures compatible with frameworks like Reveal.js, bridging visual editing with standard web presentation formats. - State Management: Manage the complex 2D array of slides, active slide indices, and slide-specific data using a robust state management solution (e.g., Zustand or React Context). - Code Highlighting: Integrate a lightweight library (like PrismJS or Highlight.js) for robust syntax highlighting within code block elements. - Export & Serialization: Ensure the entire presentation can be serialized into a single JSON object for saving, and exportable as a standalone HTML file. - Performance: Optimize the editor to handle large decks with heavy images without lagging, using lazy loading for off-screen slides.
In-List Ad$79/30 days
promote your product in the vibecoded listWhat you lose
- ✕Hosted infrastructure and managed operations from Slides.com
- ✕The original service's mature integrations and ecosystem
Prior art / alternatives
Why it still works
💅 execution polish · 👥 collaboration
In-List Ad$79/30 days
promote your product in the vibecoded list