On this page
Getting StartedExample 1: Photorealistic image generationExample 2: In-image text renderingSupported Ideogram ModelsConclusionRelated
Tutorials

Free, Unlimited Ideogram API

Reynaldi Chernando
On this page
Getting StartedExample 1: Photorealistic image generationExample 2: In-image text renderingSupported Ideogram ModelsConclusionRelated

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 access Ideogram 3.0 directly from client-side JavaScript — known for industry-leading in-image text rendering and photorealistic output.

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 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>

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

Example 1: Photorealistic image generation

To generate an image using Ideogram 3.0, use 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-3.0" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram 3.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-3.0" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: In-image text rendering

Ideogram is known for accurate, stylized typography rendered directly inside generated images — a strong fit for posters, logos, and marketing visuals where competing models often produce garbled text. 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-3.0" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram 3.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-3.0" }
        )
        .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-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.

Free, Serverless AI and Cloud

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

Get Started Now

Read the Docs • Try the Playground