Free, Unlimited Ideogram API

Reynaldi Chernando

Updated: July 1, 2026

On this page

Getting Started Example 1: Photorealistic image generation Example 2: In-image text rendering Supported Ideogram Models Conclusion Related

This tutorial shows you how to add Ideogram image generation to your web application using Puter.js, without needing API keys or backend infrastructure. With Puter.js, you can call Ideogram 4.0 and Ideogram 3.0 directly from client-side JavaScript. Both are known for in-image text rendering and photorealistic output; 4.0 is the newer release, adding native 2K output and stronger typography.

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' image generation, 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 module 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>

Nothing else is required to start generating images with Ideogram in your application.

Example 1: Photorealistic image generation

To generate an image using Ideogram 4.0, pass its model ID to the puter.ai.txt2img() function:

puter.ai.txt2img(
    "A photorealistic close-up of a hummingbird hovering beside a tropical flower, golden hour lighting, shallow depth of field",
    { model: "ideogram/ideogram-4.0", width: 2048, height: 2048 }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram 4.0 Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A photorealistic close-up of a hummingbird hovering beside a tropical flower, golden hour lighting, shallow depth of field",
            { model: "ideogram/ideogram-4.0", width: 2048, height: 2048 }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

To use Ideogram 3.0 instead, swap the model ID to ideogram/ideogram-3.0. The rest of the call is identical.

Example 2: In-image text rendering

Ideogram renders accurate, stylized typography directly inside generated images, which fits posters, logos, and marketing visuals where competing models often produce garbled text. Ideogram 4.0 pushes this further, scoring 0.97 OCR accuracy on the X-Omni benchmark. Try a prompt with explicit text:

puter.ai.txt2img(
    "A retro-futurist concert poster, bold geometric layout, the title 'NEON HORIZON' in chrome metallic letters across the top, the subtitle 'Live at the Astrodome, Saturday August 9' centered below, vibrant magenta and cyan accents",
    { model: "ideogram/ideogram-4.0", width: 2048, height: 2048 }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram 4.0 Typographic Poster</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A retro-futurist concert poster, bold geometric layout, the title 'NEON HORIZON' in chrome metallic letters across the top, the subtitle 'Live at the Astrodome, Saturday August 9' centered below, vibrant magenta and cyan accents",
            { model: "ideogram/ideogram-4.0", width: 2048, height: 2048 }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Supported Ideogram Models

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

ideogram/ideogram-4.0
ideogram/ideogram-3.0

Conclusion

Using Puter.js, you can integrate Ideogram image generation into your app without having to use API keys or set up an AI server yourself. And thanks to the User-Pays model, you can add this feature for free to your application, since your users cover their own image generation usage, not you as the developer.

You can find more details about Puter.js image generation API in the documentation.

Ship a Full-Stack App with One Prompt

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

Try in

Coding manually? see the guide