Code Generation lets you add custom interactive elements and effects to your pages.
It’s different from page or form generation, because here you’re working with code inside a dedicated custom code frame.
This is the place where the AI can generate snippets that enhance your page.
How to access it
You can access the code generator by adding a Custom Code block onto your page. Click on the block, then select AI Assistant. From there, you can start prompting.
Unlike page or form prompts, here you’ll need to be more precise.
Code generation works more like “AI-native tools.” That means you should describe exactly what you want, sometimes including technical details.
If you’d like a step-by-step guide on using this feature, check out our article on the AI Assistant.
What’s possible
The AI can generate many small but powerful elements inside the custom code frame, including:
Labels and badges
Charts (bar charts, pie charts, progress indicators)
Calculators (simple, client-side logic)
Custom buttons with unique behaviors
Entire sections styled in code
Elements with effects, such as typewriter text or animated counters
Essentially, if it fits inside the code frame, you can attempt it.
What’s not possible
There are some limits you should keep in mind:
No back-end logic (e.g. database connections, server-side actions)
No effects that change the entire page or large parts of a section (e.g. full custom background animations)
No extremely complex applications. The assistant is best for focused, lightweight features.
No editing of existing Onepage elements
Iterating in chat mode
Unlike the other generation features (eg. page / form ), code generation is conversational. You can:
Ask the AI to improve or fix its own code
Keep iterating until the snippet works as expected
Even paste in existing code and ask the AI to modify it
This makes the code assistant flexible, but it also assumes you have some basic coding knowledge. You’ll need to understand enough to test, adjust, and finalize the code before publishing.
Eliminating the “Cold Start” problem
If you’re not sure what to ask for, there’s an easy trick: make a screenshot of something you’ve seen elsewhere. Drop the screenshot into the AI assistant and ask it to recreate the effect or element inside your page.
The AI won’t reproduce the screenshot pixel-for-pixel, but it will understand the idea and generate something close. From there, you can refine it step by step.
This is one of the fastest ways to go from zero to a working custom feature.
Good prompt examples
Here are some prompts that work well with Code Generation:
“Create a countdown timer that starts at 10 minutes and shows minutes:seconds.”
“Add a typewriter effect to this text: ‘We build AI websites faster than anyone else.’”
“Generate a progress bar that fills to 75% with the label ‘Project complete.’”
“Make a button that changes color when hovered and links to the pricing section.”
“Create a simple calculator that adds two numbers together and shows the result.”
“Add an animated number counter that counts from 0 to 500 in 3 seconds.”
“Generate a pie chart showing Sales 60%, Marketing 25%, Operations 15%.”
“Build a sliding testimonial carousel with 3 quotes.”
“Create a floating label that says ‘New!’ in the top right corner of a product image.”
“Add a button that smoothly scrolls the page back to the top when clicked.”
“Generate a bar chart comparing Revenue, Expenses, and Profit.”
“Create a blinking cursor effect at the end of a heading.”
“Make a card element with hover animation: zoom in slightly and add a shadow.”
“Add a rotating text effect cycling between ‘Fast’, ‘Flexible’, ‘Powerful’.”
“Create a progress circle that fills to 90% with the label ‘Customer Satisfaction.’”
📝 Summary: Code Generation is best for small, interactive features inside the custom code block. Be clear in your prompts, iterate using chat, and don’t hesitate to use screenshots as inspiration.
With a bit of testing, you can create powerful custom elements.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂