Babel Plugin Transform Typograf

Automatically formats your translations in JS
Alternatives To Babel Plugin Transform Typograf
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
2 years ago6mit
Quran JSON ~ 6236 verses, 114 surah, 30 Juz
Format Message1949575a year ago45February 17, 202217mitJavaScript
Internationalization Made Easy
Tilejson Spec191
a year ago22
JSON format for describing map tilesets.
7 years agoapache-2.0Java
Illegal Mod Sites177
2 months ago18otherPython
📜 A list of websites that are illegally redistributing game mods
Shiny.i18n1565a month ago3January 16, 202315otherR
Shiny applications internationalization made easy
4 years ago12other
A collection of freely licensed translations of biblical text in OSIS format.
6 days ago36gpl-2.0Perl
Maintain the translations of your documentation with ease (PO for anything)
I18n Portable9961a year ago15January 21, 202019mitC#
Simple and cross platform internationalization/translations for Xamarin and .NET
Translation Server97
2 months ago32otherJavaScript
A Node.js-based server to run Zotero translators
Alternatives To Babel Plugin Transform Typograf
Select To Compare

Alternative Project Comparisons
Amplifr Logo

Babel Typograf Plugin

The plugin automatically formats your translations in JS.


  • It uses Typograf to format the text;
  • Also, it replaces ~ with non-breaking space. It’s easier to use than UTF-8 character, and it is visible in any editor.

Structure (our approach)

const I18N = {
  ru: {
    heading: 'Структура должна быть ',
    content: 'вот такая. Допускается ' +
    array: [
      'Допускается использовать массивы',
        'И массивы внутри массивов',
        'Удобно для списков'
  en: {
    heading: 'Structure should be ',
    content: 'like this. It`s allowed ' +
             'to use multiline~translations',
    array: [
      'You can use arrays',
        'And arrays inside of arrays',
        'It is used as lists in the main'

🚩 Also, you can wrap the translation object with any function if translation is a first argument of this function:

const I18N = messages({...})

Example usage

const t = I18N[this.context.locale]

h('div', [
  h('h1', [t.heading])
  h('p', [t.content])
  • Translation should be plain otherwise it won’t be processed;
  • But Arrays are supported (used as lists in the main);
  • Anyway Functions won’t be processed.

This is mine very first Babel Plugin so please send an Issue if you have any suggestions how to improve this.

Plugin installation

  1. First of all, you need to install the package:
$ yarn add babel-plugin-transform-typograf
  1. Then you should add the plugin in your Babel config, for example, .babelrc:
  "plugins": [


  • It is tested with ru 🇷🇺 and en 🇺🇸 languages only for now;
  • Rules enabled: nbsp, hellip (ellipsis), apostrophe.


Run the following command to run test:

$ yarn test

It compares actual.js after transformation with an expected.js. Please note that due to unexpected behavior of Babel (it forces escaping of Cyrillic symbols), I have to add unescaping function to the test file.

Special thanks to Andrey Sitnik

Popular Translation Projects
Popular Format Projects
Popular Data Processing Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.