Free, Unlimited Ideogram API

Reynaldi Chernando

Updated: October 8, 2026

On this page

Getting Started Example 1: In-image text rendering Example 2: Editing an existing image Example 3: Quick drafts with a faster tier Supported Models Conclusion Related

This tutorial shows you how to add Ideogram image generation and editing to your web application using Puter.js, without needing API keys or backend infrastructure. Puter.js gives you access to Ideogram 4.5, Ideogram 4.5 Precise Edit, and the V4, V3, and V2 model families.

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 and editing images with Ideogram in your application.

Example 1: In-image text rendering

Ideogram renders readable, stylized text inside generated images, which suits posters, logos, and marketing visuals. Generate one with Ideogram 4.5 using a prompt that spells out the text you want:

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-ai/ideogram-4-5" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram 4.5 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-ai/ideogram-4-5" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Editing an existing image

Ideogram 4.5 Precise Edit takes a source image and an instruction, changes only the area the instruction describes, and keeps the rest of the image the same. Pass the source image with the input_image option:

<html>
<body>
    <h1>Ideogram 4.5 Precise Edit</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "Put a pair of round black sunglasses on the dog. Keep everything else unchanged.",
            {
                model: "ideogram-ai/ideogram-4-5-precise-edit",
                input_image: "https://assets.puter.site/doge.jpeg"
            }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
    <img src="https://assets.puter.site/doge.jpeg">
</body>
</html>

Since the unchanged parts of the image are restored from the source, you can feed the output back in as the next input_image and apply several edits in a row with little drift.

Example 3: Quick drafts with a faster tier

The V4, V3, and V2 families come in tiers that trade speed for detail. Use a faster tier like Ideogram V3 Turbo to try layouts quickly, then switch the model to a higher tier like ideogram-ai/ideogram-v4-quality for the final image:

puter.ai.txt2img(
    "A minimalist coffee shop logo, a steaming cup inside a circle, the words 'MORNING RITUAL' in a clean serif font beneath it, warm brown and cream colors",
    { model: "ideogram-ai/ideogram-v3-turbo" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Ideogram V3 Turbo Logo Draft</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A minimalist coffee shop logo, a steaming cup inside a circle, the words 'MORNING RITUAL' in a clean serif font beneath it, warm brown and cream colors",
            { model: "ideogram-ai/ideogram-v3-turbo" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Supported Models

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

ideogram-ai/ideogram-4-5
ideogram-ai/ideogram-4-5-precise-edit
ideogram-ai/ideogram-v4-quality
ideogram-ai/ideogram-v4-balanced
ideogram-ai/ideogram-v3-quality
ideogram-ai/ideogram-v3-balanced
ideogram-ai/ideogram-v3-turbo
ideogram-ai/ideogram-v2a
ideogram-ai/ideogram-v2a-turbo
ideogram-ai/ideogram-v2
ideogram-ai/ideogram-v2-turbo

Conclusion

Using Puter.js, you can integrate Ideogram image generation and editing 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 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