Please enter your library’s ID and secret key.
These values were shown to you when you created your library.
Load LibraryOnce your library has been created, you’ll be shown a Library ID and a Secret Key. Make sure you copy these values to a secure location, such as a password manager. You will need these values to access and modify your rendrs.
Please enter the ID of your new rendr.
This ID will form part of the rendr’s URL, and cannot be modified once the rendr is created.
Create RendrRendr.it enables you to create images based on HTML, CSS and JavaScript snippets, as well as externally-hosted scripts or images. The final image can be customised via URL parameters or query strings.
You'll need to create a new library to store your rendrs. Just select
New Library... under the Rendr.it menu to create one.
You can open an existing library by selecting Open Library... under the Rendr.it menu. It will require your Library ID and Secret Key.
Use a CDN (for example, Amazon CloudFront) or a reverse proxy with your unique domain name (lXYZ.rendr.it, shown in the top-right corner of the screen). We will block your rendrs temporarily if you exceed 5 requests per second.
You don't. Your existing rendrs will still be accessible, but you'll have to migrate to a new library if you want to make any changes. All rendr code is publicly accessible though — just add .json to the end of your URL to get the original code.
No. Create a new library, and migrate your rendrs to it.
As we use Webkit to render images, you can use any CSS rules that are supported by the Safari or Chrome browsers.
Yes, Javascript is allowed, just add it to the HTML section. You can even import Javascript libraries like jQuery or Mootools if you so desire.
To toggle between the Live Preview and the Image Preview, just click on the required preview mode to the left of the rendr URL. Note that Image Preview is only available for rendrs that have not been modified since they were last saved.
You can pass arbitrary slash-separated parameters to your rendr in the URL, between the Rendr ID and the file extension (which determines the type of image generated). These parameters are decoded and added to the window.query.params array.
All query-string parameters are decoded and made available as strings via the window.query object. For example, the query string ?width=500 results in window.query.width == "500". Repeating query-string keys will result in the corresponding value being an array.
Your HTML and CSS support Moustache replacement syntax for URL and query-string parameters. For example, the query string ?width=500 would result in {{width}} being replaced by 500 in your HTML or CSS.