Getting started

videoCode.IO lets you create videos and images (.png images, animated .gif and .mp4 videos) using HTML and CSS. You can create videos and images (from now on referred to as content) in the web editor, or use the code generated by the editor (a “Project” JSON object) as a reference to make dynamic content using the API.

The assets included in the content (such as fonts, images, and videos) must be publicly available via HTTP.

To make content programmatically you send a request to the /render endpoint with a Project JSON object with HTML and CSS properties. For video content, the response of /render contains a renderId value, using that value you pull the /status endpoint until you get a URL of the rendered video. Webhooks coming soon.

A request to make a video (.gif) looks like this:

curl -X POST '' \
-H 'Authorization: Bearer 8d5c3e12-6531-4053-bbab-example' \
-H 'Content-Type: application/json' \
-d '{
"fps": 30,
"type": "video",
"output": "gif",
"gifRenderEveryNthFrame": 1,
"gifLoop": true,
"width": 500,
"height": 500,
"tracks": [
"start": 0,
"element": {
"text": "Hello 🌎",
"type": "p"
"duration": 120,
"keyframes": [
"keyframe": 0,
"variables": [
"mass": 1,
"name": "spring",
"type": "spring",
"damping": 4,
"stiffness": 100,
"outputRange": [
"overshootClamping": false
"elementStyle": {
"color": "white",
"opacity": "var(--spring)",
"fontSize": "180px",
"textAlign": "center",
"transform": "scale(var(--spring))"
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"backgroundColor": "rgb(45, 55, 72)"

That request generates this video:


A suggested workflow to create dynamic content is to:

  1. Create a project on the web editor that looks like one instance of the dynamic content you want to generate.
  2. Copy the code generated by the editor.
  3. Send API requests modifying that code programmatically to make different content.

Or you could only use the web editor and never use the API directly, It's up to you depending on your requirements.


Requests to the API require an API key. You can get this key on the dashboard. Send an HTTP header Authorization: Bearer API_KEY with your API key on every request.


Different quotas apply depending on your plan. 1 image = 1 credit, 1 frame of video = 0.125 credits. For example, a 5 minute video costs about 1000 credits.

On the free trial the content has a watermark and you can use 1000 credits.

Credits per month40000300000Custom
Bandwidth per month10 GB300 GBCustom

You can check your current usage on the dashboard and on the responses of the /render endpoint. If you need a plan with more credits feel free to reach out. We can accommodate most requirements.