Gets a share URL for the current project.
By default, the URL has a long query string representing the compressed encoded config object. If the argument shortUrl is set to true, a short URL is generated using the LiveCodes share service.
Signature
playground.getShareUrl(shortUrl?: boolean): Promise<string>
Parameters
If true, generates a short URL using the LiveCodes share service. If false or omitted, generates a long URL with the compressed configuration in the query string.
Returns
A promise that resolves to a shareable URL string. The URL can be opened to load the current playground project.
Usage
Generate Long URL
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container", {
config: {
markup: {
language: "html",
content: "<h1>Hello World!</h1>",
},
style: {
language: "css",
content: "h1 { color: blue; }",
},
},
});
// Generate a long URL with compressed config
const longUrl = await playground.getShareUrl();
console.log(longUrl);
// Example: https://livecodes.io/?x=code/H4sIAAAAAAAAA...
// This URL can be shared and will restore the exact project state
Generate Short URL
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container", {
config: {
markup: {
language: "html",
content: "<h1>Hello World!</h1>",
},
},
});
// Generate a short URL via LiveCodes share service
const shortUrl = await playground.getShareUrl(true);
console.log(shortUrl);
// Example: https://livecodes.io/?x=id/abc123
// Much shorter and easier to share!
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container");
const shareButton = document.getElementById('share-button');
shareButton.addEventListener('click', async () => {
// Generate short URL for easier sharing
const url = await playground.getShareUrl(true);
// Copy to clipboard
await navigator.clipboard.writeText(url);
alert(`URL copied to clipboard: ${url}`);
});
Share with Web Share API
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container");
const shareButton = document.getElementById('share-button');
shareButton.addEventListener('click', async () => {
const config = await playground.getConfig();
const url = await playground.getShareUrl(true);
if (navigator.share) {
await navigator.share({
title: config.title || 'My LiveCodes Project',
text: config.description || 'Check out this code!',
url: url,
});
} else {
// Fallback: copy to clipboard
await navigator.clipboard.writeText(url);
alert('URL copied to clipboard!');
}
});
Generate QR Code for URL
import { createPlayground } from "livecodes";
import QRCode from 'qrcode';
const playground = await createPlayground("#container");
// Generate short URL
const url = await playground.getShareUrl(true);
// Create QR code
const qrCanvas = document.getElementById('qr-code');
await QRCode.toCanvas(qrCanvas, url, {
width: 256,
margin: 2,
});
Create Embed Link
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container");
const embedButton = document.getElementById('embed-button');
embedButton.addEventListener('click', async () => {
// Get share URL
const url = await playground.getShareUrl(true);
// Create iframe embed code
const embedCode = `<iframe src="${url}" style="width: 100%; height: 500px; border: 1px solid #ccc; border-radius: 4px;"></iframe>`;
// Show in modal or copy to clipboard
console.log('Embed code:', embedCode);
await navigator.clipboard.writeText(embedCode);
});
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container");
const twitterButton = document.getElementById('tweet-button');
twitterButton.addEventListener('click', async () => {
const config = await playground.getConfig();
const url = await playground.getShareUrl(true);
const text = encodeURIComponent(
`Check out my ${config.title || 'LiveCodes project'}! 🚀`
);
const encodedUrl = encodeURIComponent(url);
const twitterUrl = `https://twitter.com/intent/tweet?text=${text}&url=${encodedUrl}`;
window.open(twitterUrl, '_blank');
});
Compare URL Lengths
import { createPlayground } from "livecodes";
const playground = await createPlayground("#container", {
config: {
markup: {
language: "html",
content: "<h1>Hello World!</h1>".repeat(100), // Large content
},
},
});
const longUrl = await playground.getShareUrl(false);
const shortUrl = await playground.getShareUrl(true);
console.log('Long URL length:', longUrl.length);
// Might be several thousand characters
console.log('Short URL length:', shortUrl.length);
// Usually under 50 characters
console.log('\nLong URL:', longUrl);
console.log('Short URL:', shortUrl);
URL Types Comparison
Long URL (default)
Advantages:
- No external service required
- Works offline (can be bookmarked)
- Permanent (doesn’t rely on server)
- All data in URL
Disadvantages:
- Very long URLs (can be thousands of characters)
- Harder to share (doesn’t fit in some contexts)
- May hit URL length limits in some browsers/services
Short URL (shortUrl: true)
Advantages:
- Much shorter URLs (easier to share)
- Fits in character-limited contexts (Twitter, SMS)
- More user-friendly
- Professional appearance
Disadvantages:
- Requires LiveCodes server
- Needs network connection
- Relies on external service availability
Notes
- Long URLs encode the entire project using LZ-String compression in the URL hash.
- Short URLs store the project on the LiveCodes server and provide a short ID.
- Both URL types restore the complete project state including code, configuration, and settings.
- If the playground is not yet loaded, calling this method will load it first.
- Short URLs are permanent and do not expire.
getConfig() - Get the configuration that would be encoded in the URLsetConfig() - Load a configuration (e.g., from a shared URL)