Ship a Full-Stack App with One Prompt

Copy this prompt into your AI coding agent, or open it in one below.

Give this to your AI Create a to-do list app using Puter.js

Coding manually? see the guide

Tutorials

Free, Unlimited ByteDance Seedance API

On this page

This tutorial shows how to use Puter.js for generating videos with ByteDance Seedance models for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to Seedance AI models such as Seedance 2.0 for clips up to 15 seconds with generated audio and Seedance 1.0 Lite for fast, lower-cost generation, all callable directly from client-side JavaScript.

Through Puter's "User-Pays" model, you can integrate advanced AI video generation into your apps while users handle their individual usage costs. This approach lets you deliver video generation features without incurring costs, managing API credentials, or configuring server infrastructure.

Getting Started

Using Puter.js requires zero configuration and no API keys. Simply add this script tag to your HTML file (works in both <head> and <body> sections):

<script src="https://js.puter.com/v2/"></script>

This single script tag is all you need to start generating videos with Seedance models in your application.

Example 1: Generate a video with audio using Seedance 2.0

Seedance 2.0 is the top tier of ByteDance's Seedance 2.0 family, served through BytePlus. It generates the video and its audio together in a single pass, renders at 480p, 720p, 1080p, or 4K, and produces clips up to 15 seconds in one generation. To generate a video using Seedance 2.0, use the puter.ai.txt2vid() function:

puter.ai.txt2vid(
    "A street musician playing saxophone on a rainy night, cinematic lighting, with the music audible",
    { model: "byteplus/dreamina-seedance-2-0-260128" }
)
.then(videoElement => {
    document.body.appendChild(videoElement);
    videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));
})

Full code example:

<html>
<body>
    <h1>Seedance 2.0 Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
Show 20 more lines...
<html>
<body>
    <h1>Seedance 2.0 Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
        puter.ai.txt2vid(
            "A street musician playing saxophone on a rainy night, cinematic lighting, with the music audible",
            { model: "byteplus/dreamina-seedance-2-0-260128" }
        )
        .then(videoElement => {
            document.body.appendChild(videoElement);
            videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));

            // Clear timer and show finished status
            clearInterval(timerInterval);
            const totalTime = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Finished (${totalTime} seconds)`;
        }).catch(error => {
            console.error(error);
            clearInterval(timerInterval);
            status.textContent = JSON.stringify(error);
        })
    </script>
</body>
</html>
Collapse code

Example 2: Efficient video generation with Seedance 1.0 Lite

Seedance 1.0 Lite is the lighter model in the lineup, with faster generation at a lower cost per clip. It suits previews, high-volume workloads, and cases where audio is not needed. To generate a video using Seedance 1.0 Lite, simply change the model parameter:

<html>
<body>
    <h1>Seedance 1.0 Lite Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
Show 20 more lines...
<html>
<body>
    <h1>Seedance 1.0 Lite Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
        puter.ai.txt2vid(
            "A fox sprinting through a snow-covered forest at dusk",
            { model: "bytedance/seedance-1.0-lite" }
        )
        .then(videoElement => {
            document.body.appendChild(videoElement);
            videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));

            // Clear timer and show finished status
            clearInterval(timerInterval);
            const totalTime = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Finished (${totalTime} seconds)`;
        }).catch(error => {
            console.error(error);
            clearInterval(timerInterval);
            status.textContent = JSON.stringify(error);
        })
    </script>
</body>
</html>
Collapse code

Example 3: Custom video size generation

The Seedance 1.0 models support custom video dimensions. You can specify the width and height for your generated videos:

<html>
<body>
    <h1>Custom Size Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
Show 24 more lines...
<html>
<body>
    <h1>Custom Size Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video
        puter.ai.txt2vid(
            "A bustling Tokyo street at night with neon signs reflecting on wet pavement",
            {
                model: "bytedance/seedance-1.0-lite",
                width: 864,
                height: 480
            }
        )
        .then(videoElement => {
            document.body.appendChild(videoElement);
            videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));

            // Clear timer and show finished status
            clearInterval(timerInterval);
            const totalTime = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Finished (${totalTime} seconds)`;
        }).catch(error => {
            console.error(error);
            clearInterval(timerInterval);
            status.textContent = JSON.stringify(error);
        })
    </script>
</body>
</html>
Collapse code

Supported Video Sizes

The Seedance 1.0 models support the following video dimensions (width × height):

864×480    736×544    640×640
960×416    416×960    1248×704
1120×832   960×960    1504×640
640×1504

Available Models

The following ByteDance Seedance models are supported by Puter.js, which can be used with the puter.ai.txt2vid() function:

byteplus/dreamina-seedance-2-0-260128
byteplus/dreamina-seedance-2-0-fast-260128
byteplus/dreamina-seedance-2-0-mini-260615
byteplus/seedance-1-5-pro-251215
byteplus/seedance-1-0-pro-fast-251015
byteplus/seedance-1-0-pro-250528
bytedance/seedance-1.0-lite
bytedance/seedance-1.0-pro



You're all set! With Puter.js, you've unlocked free access to ByteDance Seedance's powerful video generation models. Build stunning AI-powered video generation features into your apps—no API keys to manage, no backend servers to maintain, and zero infrastructure costs. Experience truly serverless video generation with Seedance!

Ship a Full-Stack App with One Prompt

Give this to your AI Build an AI chat app using Puter.js

Coding manually? see the guide