Vigma

Complete User Guide

Vigma Documentation

Master every aspect of Vigma: from basic workflows to advanced features like dynamic presentations, AI-powered content generation, and team collaboration. Everything you need to create professional websites, presentations, and web applications.

Quick Start Guide

1. Set up your workspace

Sign up or log in to Vigma to get a personal project space. The Free plan includes every core feature you need to explore.

  • After logging in, open Projects from the main navigation
  • Fill out brand info to auto-populate templates and layouts
  • Drafts auto-save in the browser—no manual save required

2. Create your first project

Describe your idea or pick a template and let AI generate the first version of your site or deck within seconds.

  • Choose the format (website, presentation, landing page, app)
  • Select from 25+ professional templates (Business Pitch, Tech Demo, etc.)
  • Highlight audience, tone, and the value proposition you want to feature
  • Select Generate to preview, tweak, or start a new variation

3. Edit visually or chat with AI

Double-click any block to edit, or use the chat panel to describe changes in natural language—Vigma updates content and styles automatically.

  • Drag and drop sections to rearrange your layout live
  • Chat handles instructions like "Change the accent color to blue" or "Add more slides"
  • Use history to revert a step whenever you need to undo a change
  • AI understands presentation flow and maintains professional design consistency

4. Manage media and assets

Upload logos, brand imagery, or video clips to the Assets panel and reuse them across projects.

  • Supports PNG, JPG, SVG, GIF, and videos up to 10 MB
  • AI automatically selects relevant Unsplash/Pexels images for presentations
  • Drag assets straight onto the canvas and Vigma fits the size automatically
  • Update global visuals from Project Settings to refresh entire sites

5. Preview and publish

Use Preview to test responsive layouts and fullscreen presentations, then publish in one click to share a Vigma link or connect a custom domain.

  • Preview mode switches between desktop and mobile instantly
  • Test fullscreen presentation mode with keyboard navigation (F key)
  • Publish to a vigma.app subdomain or bring your own domain
  • Roll back to earlier versions from the publish history

6. Collaborate securely

Invite teammates, set granular permissions, and keep every edit traceable for approvals.

  • Add members and assign roles per project in Settings
  • Activity logs capture every publish, edit, and comment
  • Enable two-factor authentication to protect your workspace
  • Real-time collaboration with comment threads on specific sections

7. Connect APIs to forms

Bind your forms to backend APIs to collect submissions, send notifications, and integrate with external services—all without writing complex code.

  • Go to the Code tab and navigate to the APIs section to view or create APIs
  • Copy the API endpoint URL from your API details
  • In your form element, set the action attribute to your API endpoint URL
  • Test your form submission and view collected data in the Submissions panel
  • Add custom validation or webhook integrations using the Custom Code editor

Core Features

Discover Vigma's powerful capabilities for creating professional presentations, interactive applications, and dynamic websites with AI assistance.

Professional Presentations

Create stunning fullscreen presentations with dynamic transitions and responsive design.

  • 6 transition effects: fade, slide, zoom, convex, concave, none
  • AI automatically chooses transitions based on content type (business = fade, tech = zoom)
  • Complete scrollbar prevention for immersive fullscreen experience
  • Keyboard navigation (arrows, space, F for fullscreen)
  • Professional templates: Business Pitch, Tech Demo, Financial Report

Creative Templates & Themes

Choose from 25+ professionally designed templates with smart AI customization.

  • Business: Corporate presentations, sales decks, investor pitches
  • Tech: Product launches, startup demos, feature showcases
  • Creative: Portfolio showcases, agency presentations, design galleries
  • Educational: Training courses, workshops, academic presentations
  • AI adapts color schemes and layouts to match your content automatically

AI-Powered Content Generation

Intelligent content creation with context-aware suggestions and automatic formatting.

  • Smart image selection from Unsplash/Pexels matching your topic
  • Professional color palette selection (low-saturation, brand-appropriate)
  • Content density optimization (max 5 bullet points per slide)
  • Automatic responsive typography with clamp() scaling
  • Context-aware layouts: feature grids, timelines, comparisons, charts

Interactive Web Applications

Build production-ready web apps with state management and data persistence.

  • Todo lists, calculators, timers, note-taking apps, expense trackers
  • Component-based architecture with vanilla JavaScript
  • Centralized state management and localStorage persistence
  • Professional UI patterns: toast notifications, loading states, validation
  • Mobile-first responsive design with touch-friendly interactions

Advanced Media Handling

Professional asset management with automatic optimization and AI integration.

  • AI image generation with DALL-E 3 (5 credits standard, 10 credits HD)
  • Automatic image sizing and compression for web performance
  • SVG support for scalable graphics and logos
  • Video embedding and responsive media containers
  • Brand asset library with global updates across projects

Documentation & Version Control

Automatic documentation generation and comprehensive project tracking.

  • Auto-generated docs: README.md, requirements, API documentation
  • 3-layer documentation protection ensures nothing is lost
  • Project history with rollback capabilities
  • Reference document upload for RAG-enhanced AI generation
  • Markdown support for technical documentation

Advanced Features

Enterprise-grade capabilities for teams, developers, and organizations requiring advanced customization and collaboration tools.

Team Collaboration

Enterprise-grade collaboration tools with granular permissions and activity tracking.

  • Role-based access control (Owner, Editor, Viewer)
  • Real-time collaborative editing with conflict resolution
  • Comment threads with @mentions and notifications
  • Activity logs with detailed change tracking
  • Two-factor authentication and workspace security

Performance & Optimization

Built-in performance optimization and quality validation.

  • Automatic code minification and optimization
  • Image compression and responsive loading
  • WCAG AA accessibility compliance checking
  • Page speed optimization with lazy loading
  • Quality scoring system for professional standards

Developer Tools

Advanced customization options for developers and power users.

  • Custom CSS and JavaScript injection
  • API endpoint creation and management
  • Webhook integrations for external services
  • Environment variables and configuration management
  • Export projects as static files or deploy to custom domains

Data & Analytics

Comprehensive data collection and analysis capabilities.

  • Form submission tracking and management
  • User interaction analytics and heatmaps
  • A/B testing for different design variations
  • Performance metrics and loading time analysis
  • Export data in multiple formats (JSON, CSV, PDF)

Professional Presentations

Create immersive, fullscreen presentations with dynamic transitions and professional design

Smart Transitions

  • • Fade: Business & financial reports
  • • Slide: Educational & training content
  • • Zoom: Tech demos & product launches
  • • Convex/Concave: Creative & artistic presentations
  • • None: Data-heavy, fast-paced content

Navigation Controls

  • • F key: Toggle fullscreen mode
  • • Arrow keys: Navigate between slides
  • • Space: Next slide
  • • Escape: Exit fullscreen
  • • Mouse wheel: Scroll through slides

Scrollbar Prevention

Vigma automatically ensures your presentations have no scrollbars for an immersive, professional experience. Content is intelligently fitted within viewport constraints.

html, body {overflow: hidden;} /* Global scrollbar prevention */
.page {overflow: hidden;} /* Page-level prevention */
::-webkit-scrollbar {display: none;} /* Complete hiding */

Need Help? We're Here for You!

Get instant support through multiple channels. Our team is ready to help you create amazing projects with Vigma.

Email Support

Get detailed help for technical questions and bug reports

support@vigma.app
Response within 24 hours

Live Chat

Instant help for urgent issues and quick questions

Available 24/7

Phone Support

Direct voice assistance for complex issues

Mon-Fri 9-5 PST

Community

Join our Discord for peer support and discussions

24/7 Community

Quick Help Resources

Quick StartBrowse TemplatesTutorial BlogSend Feedback

Frequently Asked Questions

Q: How do I create my first project?

Describe your desired website or presentation in the input box on the homepage and click "Generate".

Q: How do I change presentation transition effects?

AI automatically selects appropriate transitions based on content, like fade for business or zoom for tech.

Q: Can I customize colors and styles?

Yes! Use the chat feature to tell AI "change to blue theme" or other customization requests.

Q: How do I publish my project?

Click "Publish" in the project editor to publish to a vigma.app subdomain or connect a custom domain.

Have other questions? Contact us through any of the methods above, and we'll keep updating our FAQ.