Skip to main content

​
Overview

The Assets Manager lets you:
  • Upload files - Images, videos, audio, fonts, data files
  • Get URLs - Use uploaded files in your projects
  • Organize assets - Search, filter, and sort your files
  • Deploy to GitHub - Host assets on GitHub Pages

​
Uploading Assets

​
Upload via Data URL

Convert files to base64 data URLs:
1

Open Assets Manager

Click Menu → Assets
2

Choose File

Click “Add Asset” → “Data URL” tab
3

Select File

Choose a file from your computer
4

Get URL

A data URL is generated:
data:image/png;base64,iVBORw0KGgo...
Data URLs embed the file directly in your code. Good for small files, but can make projects large.
Size limits:
  • Recommended: < 100 KB
  • Maximum: Browser dependent (~10 MB)

​
Deploy to GitHub Pages

Host files on GitHub for production use:
1

Sign In

Sign in with GitHub if not already authenticated
2

Upload File

Click “Add Asset” → “GitHub Pages” tab
3

Configure

  • Select file
  • Choose repository (or create new)
  • Set branch (usually gh-pages)
4

Deploy

Click “Upload” to deploy to GitHub
5

Get URL

Receive a permanent URL:
https://username.github.io/repo/assets/xyz/image.png
GitHub Pages assets are:
  • Permanently hosted (free)
  • Globally accessible
  • Version controlled
  • Production-ready

​
Managing Assets

​
View All Assets

Assets Manager shows all your uploaded files:

Thumbnail Preview

Visual previews for images, videos, and supported formats

File Details

  • File type
  • Upload date
  • File URL

​
Copy URLs

Click any asset to copy its URL to clipboard: 
<!-- Use in HTML -->
<img src="https://username.github.io/repo/assets/xyz/logo.png" />

<!-- Use in CSS -->
<style>
  .hero {
    background-image: url('https://username.github.io/repo/assets/xyz/bg.jpg');
  }
</style>

<!-- Use in JavaScript -->
<script>
  const img = new Image();
  img.src = 'https://username.github.io/repo/assets/xyz/icon.svg';
</script>
Filter assets by type:
  • Images (PNG, JPG, GIF, SVG, WebP)
  • Videos (MP4, WebM)
  • Audio (MP3, WAV, OGG)
  • Fonts (WOFF, WOFF2, TTF)
  • Data (JSON, CSV, XML)
  • Archives (ZIP)
  • And more…

​
Delete Assets

Remove unused assets:
1

Select Asset

Find the asset in the list
2

Delete

Click the delete (trash) icon
3

Confirm

Confirm deletion (cannot be undone)
Deleting an asset from the manager doesn’t remove it from GitHub. You’ll need to delete it from the repository manually.

​
Delete All Assets

Clear all stored asset references: Menu → Assets → Delete All
This removes all asset records from LiveCodes. Files on GitHub Pages remain until manually deleted.

​
Supported File Types

​
Images

  • Raster: PNG, JPG, JPEG, GIF, WebP, BMP, ICO
  • Vector: SVG
  • Usage: <img>, CSS backgrounds, favicons

​
Videos

  • Formats: MP4, WebM, OGG
  • Usage: <video> elements, backgrounds

​
Audio

  • Formats: MP3, WAV, OGG, M4A
  • Usage: <audio> elements, sound effects

​
Fonts

  • Formats: WOFF, WOFF2, TTF, OTF, EOT
  • Usage: @font-face in CSS
Example: 
@font-face {
  font-family: 'MyCustomFont';
  src: url('https://username.github.io/repo/assets/xyz/font.woff2') format('woff2');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

​
Data Files

  • Formats: JSON, CSV, XML, TXT, YAML
  • Usage: Fetch data in JavaScript
const response = await fetch('https://username.github.io/repo/assets/xyz/data.json');
const data = await response.json();
console.log(data);

​
Archives

  • Formats: ZIP
  • Usage: Download bundles, extract in browser

​
Other Files

  • HTML, CSS, JavaScript
  • PDF, Markdown
  • Any other file type

​
Best Practices

1

Optimize Files

Compress images and videos before uploading:
  • Use WebP for images
  • Compress videos
  • Minify JSON/CSV
2

Use Descriptive Names

Name files clearly:
hero-background.jpg  ✓
img001.jpg          ✗
3

Organize by Project

Use separate repos or folders for different projects
4

Version Assets

Update filenames when changing assets:
logo-v2.png
icon-2024.svg

​
Storage Limits

​
Data URLs

  • Stored in browser localStorage
  • Combined with project data
  • Limit: ~5-10 MB total (browser dependent)

​
GitHub Pages

  • Repository limit: 1 GB
  • File size limit: 100 MB (recommended < 50 MB)
  • Bandwidth: 100 GB/month (free tier)
For large files or high traffic, consider dedicated hosting services.

​
Asset URLs in Projects

​
Relative URLs

Not supported in LiveCodes playgrounds. Always use absolute URLs: 
<!-- ✗ Won't work -->
<img src="./images/logo.png" />

<!-- ✓ Use absolute URLs -->
<img src="https://username.github.io/repo/assets/xyz/logo.png" />

​
Using in Templates

LiveCodes templates can reference base URL: 
<img src="{{ __livecodes_baseUrl__ }}assets/templates/react.svg" />
This is for internal templates only.

​
Programmatic Upload

Use the SDK to upload assets: 
import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container');

// Upload to GitHub Pages
const result = await playground.exec('deployFile', {
  file: {
    path: 'logo.png',
    content: base64ImageData
  },
  repo: 'my-assets',
  branch: 'gh-pages',
  message: 'Add logo'
});

console.log('Asset URL:', result.url);

​
Troubleshooting

  • Check file size (< 100 MB for GitHub)
  • Verify GitHub authentication
  • Ensure repository exists and you have write access
  • Check internet connection
  • Wait 1-2 minutes for GitHub Pages to update
  • Check URL is correct (case-sensitive)
  • Verify file was uploaded successfully
  • Check CORS if accessing from different domain
  • Refresh the Assets Manager
  • Check you’re signed in to the correct GitHub account
  • Verify asset was saved to correct repository

Build docs developers (and LLMs) love

Get started for freeTalk to us