Basic Usage

This guide covers the fundamental concepts and methods for using SquibView in your projects.

Creating a SquibView Instance

Basic Setup

const editor = newSquibView({
    element: document.getElementById('editor'),
    content: '# Hello World\n\nThis is **markdown** content.'
});

With Options

const editor = newSquibView({
    element: document.getElementById('editor'),
    content: '# My Document',
    initialView: 'split',        // 'src', 'html', or 'split'showControls: true,          // Show view toggle buttonstitleShow: true,             // Show title bartitleContent: 'My Editor'// Title bar text
});

Core Methods

Setting Content

// Set markdown content
editor.setContent('# New Content\n\nThis is **new** content.', 'md');

// Set HTML content
editor.setContent('<h1>HTML Content</h1><p>Direct HTML</p>', 'html');

// Set CSV data
editor.setContent('name,age\nJohn,25\nJane,30', 'csv');

Getting Content

// Get current source contentconst source = editor.getContent();

// Get rendered HTMLconst html = editor.getHTML();

// Check current view modeconst view = editor.getCurrentView(); // 'src', 'html', or 'split'

View Management

// Switch views
editor.setView('src');    // Source only
editor.setView('html');   // HTML only  
editor.setView('split');  // Split view// Toggle between views
editor.toggleView();

Content Types

SquibView supports multiple content types:

TypeDescriptionExample
mdMarkdown (default)# Title\n\n**Bold text**
htmlRaw HTML<h1>Title</h1><p>Text</p>
csvComma-separated valuesname,age\nJohn,25
tsvTab-separated valuesname\tage\nJohn\t25

Markdown Features

SquibView supports GitHub-Flavored Markdown including:

Special Content Blocks

Mermaid Diagrams

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]

Math Equations

Inline math: $E = mc^2$

Block math:
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Code with Syntax Highlighting

```javascript
function hello() {
    console.log('Hello, World!');
}

GeoJSON Maps

```geojson
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-74.0445, 40.6892]
  },
  "properties": {
    "name": "Statue of Liberty"
  }
}

Event Handling

SquibView uses an event system for communication:

// Listen for content changes
editor.on('content-changed', (content, type) => {
    console.log('Content updated:', content);
});

// Listen for view changes
editor.on('view-changed', (view) => {
    console.log('View changed to:', view);
});

// Listen for selection changes
editor.on('selection-changed', (selection) => {
    console.log('Selected text:', selection.text);
});

Export and Copy

Copy to Clipboard

// Copy HTML to clipboard
editor.copyHTML();

// Copy source to clipboard
editor.copySource();

Export Content

// Get clean HTML for exportconst exportHTML = editor.getHTML();

// Get current source contentconst exportSource = editor.getContent();

Styling and Customization

Custom CSS

/* Override default styles */.squibview {
    font-family: 'Custom Font', serif;
}

.squibview.source-panel {
    background-color: #f5f5f5;
}

.squibview.html-panel {
    background-color: white;
}

Responsive Design

SquibView automatically adapts to different screen sizes:

/* Mobile-first styling */.squibview {
    height: 400px;
}

@media (min-width: 768px) {
    .squibview {
        height: 600px;
    }
}

Best Practices

  1. Initialize after DOM is ready

    document.addEventListener('DOMContentLoaded', () => {
    const editor = newSquibView({ /* options */ });
});

  2. Handle errors gracefully

    try {
    editor.setContent(userContent, contentType);
} catch (error) {
    console.error('Failed to set content:', error);
}

  3. Clean up when done

    // If your framework supports cleanup
editor.destroy?.();

Next Steps