On this page
Getting StartedExample 1: Generate a video with PixVerseExample 2: Custom video size generationAvailable ModelsRelated
Tutorials

Free, Unlimited PixVerse API

Reynaldi Chernando
On this page
Getting StartedExample 1: Generate a video with PixVerseExample 2: Custom video size generationAvailable ModelsRelated

This tutorial shows how to use Puter.js to add PixVerse video generation to your app for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to PixVerse V5, a powerful AI model for high-quality video generation, callable directly from client-side JavaScript.

Puter.js uses the User-Pays model, where users of your application cover their own AI costs. This means you as a developer don't pay anything for your users' usage, making your app practically free to run. You can scale to unlimited users and pay nothing for the AI or server usage.

Getting Started

To use Puter.js, import our NPM library in your project:

// npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';

Or alternatively, add our script via CDN if you are working directly with HTML, simply add it to the <head> or <body> section of your code:

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

This is all you need to start adding PixVerse video generation to your application.

Example 1: Generate a video with PixVerse

PixVerse V5 enables high-quality video generation with natural motion and realistic details. To generate a video using PixVerse, use the puter.ai.txt2vid() function:

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

Full code example:

<html>
<body>
    <h1>PixVerse 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>PixVerse 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: "pixverse/pixverse-v5" }
        )
        .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: Custom video size generation

PixVerse video generation supports 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: "pixverse/pixverse-v5",
                width: 640,
                height: 360
            }
        )
        .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 PixVerse model supports the following video dimensions (width × height):

640×360    480×360    360×360
270×360    360×640    960×540
720×540    540×540    405×540
540×960    1280×720

Available Models

Puter.js supports the following PixVerse model for use with the puter.ai.txt2vid() function:

pixverse/pixverse-v5



You're all set! With Puter.js, you can add PixVerse's powerful video generation to your app for free. Ship AI-powered video generation features without managing API keys, running backend servers, or paying for infrastructure—your users cover their own usage via the User-Pays model.

Free, Serverless AI and Cloud

Start creating powerful web applications with Puter.js in seconds!

Get Started Now

Read the Docs • Try the Playground