Getting Started

SnipGrab allows you to enhance your YouTube coding tutorials with synchronized code snippets. Your viewers get the right code at exactly the right moment.

Why Use SnipGrab?

  • Better Learning Experience: Viewers focus on concepts, not typing
  • Higher Engagement: Reduce viewer frustration and dropoff
  • Easy Implementation: Simple Markdown format, 2-minute setup
  • No Additional Tools: Host files anywhere, no special platform needed

Quick Start

  1. Create a .snipgrab.md file with timestamped code
  2. Host it on GitHub, your website, or any public URL
  3. Link the file in your YouTube video description
  4. Your viewers with SnipGrab will see synced code automatically!

SnipGrab File Format

SnipGrab files use a simple Markdown format with special timestamp headers to sync code with your video.

Basic Structure

# Your Tutorial Title

## 00:30 – Setting up the server
```javascript
const express = require('express');
const app = express();
app.listen(3000);
```

## 02:45 – Adding middleware  
```javascript
app.use(express.json());
app.use(cors());
```

## 05:20 – Creating routes
```javascript
app.get('/api/users', (req, res) => {
  res.json({ users: [] });
});
```

Format Rules

  • Timestamps: Use ## MM:SS or ## HH:MM:SS format
  • Descriptions: Add descriptive text after the timestamp (optional but recommended)
  • Code Blocks: Use standard Markdown code blocks with language specification
  • Languages: Support for any programming language (javascript, python, css, etc.)

Frontmatter

You can add frontmatter at the top of your SnipGrab file to include metadata about the tutorial. This is especially useful if someone finds the file before watching the video.

---
channel: 'DevMaster Pro'
channel_url: 'https://youtube.com/@dev-tutorials-123'
video_title: 'Build a React Todo App from Scratch'
video_url: 'https://youtube.com/watch?v=abc123'
date: '2024-03-15'
difficulty: 'beginner'
duration: '25:30'
topics: ['React', 'JavaScript', 'Hooks', 'State Management']
repository: 'https://github.com/dev-tutorials-123/react-todo-tutorial'
---

# Build a React Todo App from Scratch

## 01:20 – Component setup
```jsx
import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  return 
My Todo App
;
}
```

You can include any information you find relevant such as:

  • Channel details: Name and URL for attribution
  • Video information: Title, URL, and publication date
  • Tutorial metadata: Difficulty level, duration, topics covered
  • Resources: Repository links, documentation, or related materials

💡 ProTip: Copy Timestamp Blocks

The SnipGrab extension includes a handy feature to make creating timestamps easier! While watching a YouTube video, use the context menu or keyboard shortcut to copy a timestamp template block.

Keyboard Shortcuts:

  • Windows/Linux: Alt + Shift + T
  • Mac: Command + Shift + T

Context Menu: Right-click on the YouTube page and select "Copy Timestamp Block"

This copies a template like this to your clipboard:

## 00:55 – DESCRIPTION
```plaintext
YOUR_CONTENT
```

Simply paste it into your .snipgrab.md file, replace "DESCRIPTION" with your section title, change "plaintext" to your programming language, and add your code content!

Hosting & Linking

Your SnipGrab files need to be publicly accessible. Here are the most popular hosting options.

Rocket GitHub (Recommended)

Host your .snipgrab.md files in a GitHub repository for easy management and version control.

Example URL:
https://raw.githubusercontent.com/username/repo/main/tutorial.snipgrab.md
Pros: Free, reliable, version control, easy updates, no user permission required (GitHub URLs are pre-approved for security)

Your Website

Host files directly on your own website or blog.

Example URL:
https://yoursite.com/tutorials/react-basics.snipgrab.md
Pros: Full control, custom domain, integrate with your brand

Other Platforms

Any platform that serves raw text files works: GitLab, Bitbucket, Dropbox public links, etc.

Requirements: Must serve plain text content with proper CORS headers and filename must end with .snipgrab.md

Linking in Video Descriptions

Add a clear link to your SnipGrab file in your YouTube video description:

Simple Link

📝 Code snippets: https://github.com/username/project/tutorial.snipgrab.md

Detailed Description

{▸} This tutorial is SnipGrab-Ready!
Install free extension: https://snipgrab.com
Snippets file: https://github.com/username/project/react-tutorial.snipgrab.md

Best Practices

Follow these guidelines to create the best possible experience for your viewers.

Timing

  • Match timestamps to when you start explaining the code
  • Give viewers a few seconds to read before you continue
  • Consider slightly earlier timestamps for complex code
  • Test with your own video to verify timing

Code Quality

  • Include relevant comments in your code snippets
  • Format code clearly with proper indentation
  • Break large code blocks into logical sections

Content Organization

  • Start with a clear title describing the tutorial
  • Use descriptive text after timestamps
  • Group related code snippets together

Viewer Experience

  • Mention SnipGrab at the start of your video
  • Encourage viewers to install the extension
  • Test your setup before publishing
  • Provide fallback instructions for non-users

Testing Your Setup

  1. Create your .snipgrab.md file and host it publicly
  2. Install the SnipGrab extension yourself
  3. Test your file using one of these methods:
    • Add to video description: Add the link to your video description (you can edit this before publishing)
    • Use "Add Content" button: Click the "Add Content" button in the SnipGrab extension and paste your file content
    • Use "Add URL" button: Add the URL directly in the extension without needing it in the description
  4. Watch your video and verify that snippets appear at the right times
  5. Adjust timestamps if needed and re-test

Examples

Examples to get you started quickly.

JavaScript Tutorial Template

# JavaScript Fundamentals - Variables and Functions

## 00:45 – Variable declarations
```javascript
// Different ways to declare variables
let userName = 'Alice';
const maxUsers = 100;
var isActive = true;
```

## 02:30 – Function declarations
```javascript
// Function declaration
function greetUser(name) {
  return `Hello, ${name}!`;
}

// Arrow function
const calculateAge = (birthYear) => {
  return new Date().getFullYear() - birthYear;
};
```

## 04:15 – Using the functions
```javascript
const greeting = greetUser('Bob');
const age = calculateAge(1990);

console.log(greeting); // Hello, Bob!
console.log(`Age: ${age}`); // Age: 33
```

Configuration File Template

# Building a Configuration File

## 01:20 – Basic setup
```plaintext
# Configuration for web server
server_port = 3000
host = "localhost"
debug_mode = true
```

## 03:45 – Database configuration
```plaintext
# Database settings
db_host = "localhost"
db_port = 5432
db_name = "myapp"
db_user = "admin"
max_connections = 20
```

Python Tutorial Template

# Python Data Analysis with Pandas

## 01:00 – Import libraries
```python
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
```

## 02:15 – Load and explore data
```python
# Load the dataset
df = pd.read_csv('sales_data.csv')

# Basic info about the dataset
print(df.head())
print(df.info())
print(df.describe())
```

## 04:30 – Data cleaning
```python
# Remove missing values
df = df.dropna()

# Convert date column
df['date'] = pd.to_datetime(df['date'])

# Filter data for last year
last_year = df[df['date'] >= '2023-01-01']
```

## 06:45 – Analysis and visualization
```python
# Group by month and sum sales
monthly_sales = last_year.groupby(
  last_year['date'].dt.month
)['sales'].sum()

# Create a simple plot
plt.figure(figsize=(10, 6))
monthly_sales.plot(kind='bar')
plt.title('Monthly Sales 2023')
plt.xlabel('Month')
plt.ylabel('Sales ($)')
plt.show()
```

Important Notes

Key information and best practices to help you create better SnipGrab files.

🎨 Syntax Highlighting

SnipGrab supports syntax highlighting for dozens of programming languages. Specify the language in your code blocks:

javascript, python, jsx, typescript, css, html, java, cpp, php, ruby, go, rust, sql, and many more...

🔗 Multiple SnipGrab Files

You can add multiple SnipGrab file URLs to your video description, but the extension will automatically use the first one it finds. Users can manually select other files if needed.

# Example: Multiple files in description
📝 Part 1 (Setup): https://github.com/user/repo/react-setup.snipgrab.md
📝 Part 2 (Components): https://github.com/user/repo/react-components.snipgrab.md
📝 Part 3 (State): https://github.com/user/repo/react-state.snipgrab.md

Note: This feature may change in the future based on user feedback.

✅ Good Practices

  • Don't make snippets too close to each other in time - give viewers time to read
  • Try to split long blocks of code into smaller, digestible sections
  • Test your timing by watching the video yourself

Note: Since SnipGrab is new, this list will grow over time as we learn from creator feedback.