# i18n in Vanilla JavaScript - [[Playground](https://playpen.sudovanilla.org/#H4sIAAAAAAAAA51U3YrbRhS%2B91OcKsvuTJG1zZKLYlsOoT%2BUsqUhm%2BbGGHwsHUuzGc%2BoM6N1jNHFWlBS9qb0pvQFGkrpVehFoX0a3fQxysiO7d0mLVQCoZnz933fnDOD%2FAxSdNgV9z9UcVBgRt2cMBUqC4aD0%2Fxs2BkUhx5zshYz8sZi2BngoU0K9dxGVpcmoQByQ7M4uOc9cdjpDN7rduFx6UAoWOrSgKMXDrrdYWdgEyMKN%2BwAACRaWQd4hULiVNK5TlCShRhGJ6ROQji5LE7GB55y57Bqd%2F1Dqnew8s9tYj0IPGCP5BkqISXC53iFFy2MILwd%2BYZwD4KnubAgLCBYnBeSWgrR3YBWheAugta0laYHwTNBC7hol%2FCRTim45VztVtU%2B%2BWXxn6ya%2Brumvmnqnw%2F4NNevPNl%2FodWsf2vq1039Q1P%2F0tTfNOtfm%2FXvTf2yuX7VXP%2F4%2F%2Fg16z%2Bb%2Bg%2BfZ%2F3a%2F9TfNuvv%2F%2FrpplnfvJNqZ%2FMdnL7ph03PtKpbt%2FR6Y%2Bb1z8kQzLSBlOYaitIU2pINQThvVdqBIkopBXSAUrau7YE7DbNSJU5ote08n3bTeFOdLg84zdFkQvXg7EHxor%2FbnWLyPDO6VGkP7t1%2F4N%2B9MdFSmx4scuFovzvTynVnOBdy2QM0AmUIFpXtWjJi1u%2FsqeNB%2BX%2FmaoXZwN3o0jL6WFgHm4O%2BPUub6aD47iSNPhj3JTnAeCFUqheRwiuRodMmkqiyEjPqb2JdrGgBXz05vyA0Sf4YDc4t20b5sfMyRrY18igjxwKfIeB9d3x8t2wkVCLLlCxz%2FPiYYex4C0PG1H%2B3L3pfGSPfQkriVCflnJSLvi7JLC9IUuK0eSQlC0a7m2gc8FDF25thJMf9JJpp8wkmOWMUD1cb%2FuQxP3LOiGnpiAW78IBHtpDCsSAKeGQoLRNijFGIPB7SQxrhuKdKKXmo%2BE4rjObokpydrlj0%2FkNenWatDm5f2cXD1ZfTS0pcRMoZQZZR5ItacjyaCenIMMZGFMoxj4crMWOT1dGKqmoSx7HjzixXGGNkqJCYEJscrVw1Cf0hfbptajYx5EqjgB2tZMUnnHFeJS0u4m8LlryqOK84DykSSpH57OkX5zFWnPffrjQLcjeXXqFb2rUHH0re30%2Fv32IH%2FmNaBgAA)]

In your HTML elements, use the `data-i18n` attribute to apply a translation key:
```html
<p data-i18n="example"></p>
```

You can also use the `i18n.dist.js` file in production, as it's 36% smaller in file size compared to `i18n.js`.