Preview

Overview

Codebolt's Preview feature provides real-time visualization of your web applications, documents, and code output. See your changes instantly with live preview, responsive design testing, and multi-format document rendering.

Live Preview

Web Application Preview

Real-Time Updates: See changes instantly as you type
Hot Reload: Automatic page refresh on file changes
Multiple Browsers: Preview in different browser engines
Responsive Testing: Test various screen sizes and orientations
Device Simulation: Simulate mobile devices and tablets

Preview Modes

Side-by-Side: Code and preview in split view
Full Preview: Full-screen preview mode
Picture-in-Picture: Floating preview window
External Browser: Open preview in external browser
Mobile Preview: Mobile-optimized preview interface

Framework Support

// React Hot Reload
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

// Vue.js Hot Reload
<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </div>
</template>

Document Preview

Markdown Rendering

GitHub Flavored Markdown: Full GFM support
Real-Time Rendering: Live markdown preview
Custom Themes: Customizable markdown themes
Export Options: Export to HTML, PDF, or other formats
Table of Contents: Automatic TOC generation

Documentation Formats

Markdown: .md, .markdown files
reStructuredText: .rst files
AsciiDoc: .adoc, .asciidoc files
LaTeX: .tex files with math rendering
Jupyter Notebooks: .ipynb file preview

Rich Media Support

Images: Inline image preview and optimization
Videos: Embedded video playback
Code Blocks: Syntax highlighted code blocks
Diagrams: Mermaid, PlantUML diagram rendering
Math Equations: LaTeX math equation rendering

Responsive Design Testing

Device Emulation

Popular Devices: iPhone, iPad, Android devices
Custom Dimensions: Set custom screen dimensions
Device Rotation: Portrait and landscape orientations
Pixel Density: Test different pixel densities
Touch Simulation: Simulate touch interactions

Viewport Testing

/* Responsive breakpoints testing */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
}

@media (min-width: 1025px) {
  .main-content {
    max-width: 1200px;
  }
}

Performance Testing

Load Time Analysis: Monitor page load performance
Resource Optimization: Identify optimization opportunities
Network Throttling: Simulate different connection speeds
Memory Usage: Monitor memory consumption
Battery Impact: Analyze battery usage on mobile devices

Development Server Integration

Local Development Servers

Express.js: Node.js web server integration
Create React App: React development server
Vue CLI: Vue.js development server
Angular CLI: Angular development server
Webpack Dev Server: Webpack development server

Static Site Generators

Gatsby: Gatsby development server
Next.js: Next.js development server
Nuxt.js: Nuxt.js development server
Jekyll: Jekyll static site preview
Hugo: Hugo static site generator

Custom Servers

{
  "preview.servers": [
    {
      "name": "Custom Node Server",
      "command": "node server.js",
      "port": 3000,
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Python Flask",
      "command": "python app.py",
      "port": 5000,
      "autoStart": true
    }
  ]
}

Browser Integration

Multiple Browser Support

Chromium: Built-in Chromium browser engine
Firefox: Firefox developer edition integration
Safari: Safari WebKit engine (macOS)
Edge: Microsoft Edge integration
Mobile Browsers: Mobile browser simulation

Developer Tools Integration

Console Access: Browser console integration
Network Monitor: Network request monitoring
Element Inspector: DOM element inspection
Performance Profiler: JavaScript performance profiling
Security Analysis: Security vulnerability scanning

Cross-Browser Testing

Compatibility Testing: Test across multiple browsers
Feature Detection: Detect browser feature support
Polyfill Suggestions: Suggest necessary polyfills
Bug Reporting: Report browser-specific issues
Automated Testing: Automated cross-browser tests

Interactive Features

Live Editing

CSS Live Editing: Modify CSS and see changes instantly
HTML Structure: Edit HTML structure in real-time
JavaScript Debugging: Debug JavaScript in preview
Component Editing: Edit React/Vue components live
Style Injection: Inject custom styles for testing

Interaction Testing

Form Testing: Test form submissions and validation
Navigation Testing: Test routing and navigation
Event Simulation: Simulate user interactions
State Management: Monitor application state changes
API Testing: Test API calls and responses

Collaboration Features

// Shared preview sessions
const previewSession = {
  id: 'session-123',
  participants: ['user1', 'user2'],
  sharedViewport: true,
  syncScrolling: true,
  annotations: true
};

// Real-time comments
function addComment(element, message) {
  const comment = {
    elementSelector: getSelector(element),
    message: message,
    author: getCurrentUser(),
    timestamp: Date.now()
  };
  
  shareComment(comment);
}

Content Management

Asset Management

Image Optimization: Automatic image compression
CDN Integration: Content delivery network support
Cache Management: Cache control and invalidation
Version Control: Asset version management
Lazy Loading: Implement lazy loading for performance

Content Types

Static Content: HTML, CSS, JavaScript files
Dynamic Content: Server-rendered content
Single Page Applications: SPA routing support
Progressive Web Apps: PWA features testing
API Documentation: Interactive API documentation

Build Integration

Build Automation: Automatic builds on file changes
Source Maps: Source map support for debugging
Minification: Test minified code behavior
Bundle Analysis: Analyze bundle size and composition
Tree Shaking: Test dead code elimination

Preview Customization

Layout Options

Split Layouts: Various split view configurations
Tabbed Interface: Multiple preview tabs
Floating Windows: Detachable preview windows
Full Screen: Full-screen preview mode
Picture-in-Picture: Always-on-top preview

Theme Customization

/* Custom preview theme */
.preview-container {
  background: var(--preview-bg);
  color: var(--preview-text);
  font-family: var(--preview-font);
}

.preview-toolbar {
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border-color);
}

.device-frame {
  border: var(--device-border);
  border-radius: var(--device-radius);
}

Device Selector: Quick device switching
Zoom Controls: Zoom in/out functionality
Refresh Button: Manual refresh control
Screenshot Tool: Capture preview screenshots
Share Options: Share preview with others

Advanced Features

Screenshot and Recording

Screenshot Capture: Capture current preview state
Screen Recording: Record preview interactions
Comparison Tool: Compare screenshots across versions
Automated Captures: Scheduled screenshot capture
Export Options: Various export formats

Analytics Integration

Usage Analytics: Track preview usage patterns
Performance Metrics: Monitor preview performance
Error Tracking: Track preview errors and issues
User Behavior: Analyze user interaction patterns
A/B Testing: Compare different versions

Accessibility Testing

Screen Reader: Test screen reader compatibility
Keyboard Navigation: Test keyboard-only navigation
Color Contrast: Analyze color contrast ratios
ARIA Testing: Validate ARIA attributes
Accessibility Audit: Comprehensive accessibility analysis

Integration and API

External Tools

Design Tools: Figma, Sketch integration
Testing Tools: Jest, Cypress integration
Performance Tools: Lighthouse, WebPageTest
Analytics Tools: Google Analytics, Mixpanel
Monitoring Tools: Sentry, LogRocket

API Access

// Preview API
const previewAPI = {
  // Capture screenshot
  async captureScreenshot(options) {
    return await preview.capture({
      format: 'png',
      quality: 90,
      viewport: options.viewport
    });
  },
  
  // Reload preview
  reload() {
    preview.refresh();
  },
  
  // Navigate to URL
  navigate(url) {
    preview.goto(url);
  }
};

Webhook Integration

Build Notifications: Notify on build completion
Deployment Updates: Update preview on deployment
Error Alerts: Alert on preview errors
Status Updates: Send status updates to external services
Custom Triggers: Custom webhook triggers

Troubleshooting

Common Issues

Loading Problems: Troubleshoot preview loading issues
CORS Errors: Resolve cross-origin resource sharing issues
Network Issues: Debug network connectivity problems
Performance Issues: Optimize preview performance
Compatibility Issues: Resolve browser compatibility problems

Debug Tools

Console Logs: Access browser console logs
Network Inspector: Inspect network requests
Error Reporting: Detailed error reporting
Performance Monitor: Monitor preview performance
Resource Usage: Track resource consumption

Overview​

Live Preview​

Web Application Preview​

Preview Modes​

Framework Support​

Document Preview​

Markdown Rendering​

Documentation Formats​

Rich Media Support​

Responsive Design Testing​

Device Emulation​

Viewport Testing​

Performance Testing​

Development Server Integration​

Local Development Servers​

Static Site Generators​

Custom Servers​

Browser Integration​

Multiple Browser Support​

Developer Tools Integration​

Cross-Browser Testing​

Interactive Features​

Live Editing​

Interaction Testing​

Collaboration Features​

Content Management​

Asset Management​

Content Types​

Build Integration​

Preview Customization​

Layout Options​

Theme Customization​

Toolbar Configuration​

Advanced Features​

Screenshot and Recording​

Analytics Integration​

Accessibility Testing​

Integration and API​

External Tools​

API Access​

Webhook Integration​

Troubleshooting​

Common Issues​

Debug Tools​