Playground

Everything below runs the published browser bundle in your own tab. There is no request to the server, and nothing you type is sent anywhere.

The same bundle is loaded on every page of these docs, so you can skip the boxes entirely: open devtools and call encode() and decode() directly.

Loading the bundle…

Decode string → model

Encode model → string

The two panes are linked: decoding fills the model box, so you can edit the model and watch the string change. Notice that a round-trip normalises qualifier order — w_500,h_300 comes back as h_300,w_500.

Use it yourself

<script type="module">
  import { encode, decode } from 'https://production-transformation-serializer.cloudinary.com/esm/latest/serializer.mjs';

  const model = decode('c_scale,w_200/e_blur:500');
  const string = encode(model);
</script>

For production, pin a version instead of latest — see ESM bundle.