TextStyler Playground

Change the inputs' values and the styling will be updated.

1. Most basic example

I am red!

{
  "text": "I am red!",
  "special": {
    "text-red-6 dark:text-red-5 font-bold": "red"
  }
}

2. Readonly

You cannot edit me!

{
  "text": "You cannot edit me!",
  "special": {
    "text-red-6 dark:text-red-5 font-bold": "cannot"
  },
  "readonly": true
}

3. Single line

text1 and text2

{
  "text": "text1 and text2",
  "special": {
    "text-red-6 dark:text-red-5 font-bold": "text1,text2"
  },
  "line": "single"
}

4. With tracking

text1 and text2 are here

[ "text1", "text2" ]

{
  "text": "text1 and text2 are here",
  "special": {
    "text-red-6 dark:text-red-5 font-bold": "text1,text2",
    "underline": "here"
  },
  "track": [
    "text1",
    "text2"
  ]
}

5. Custom Regex

text1 and text2 are here and text3 is there

{
  "text": "text1 and text2 are here and text3 is there",
  "special": {
    "text-red-6 dark:text-yellow-5 font-bold": "/text[0-9]/",
    "underline": "/(?:t)?here/,/and/"
  }
}

6. Dynamic special keys (only works with already generated css 😑)

text-red-6 dark:text-red-5 font-bold, underline

{
  "text": "text-red-6 dark:text-red-5 font-bold, underline",
  "special": {}
}

7. Dynamic special values

text1, text2

{
  "text": "text1, text2",
  "special": {}
}

8. Dynamic playground (change input to update 😪)

text1 and text2 are here

{
  "text": "text1 and text2 are here",
  "special": {
    "text-red-6 dark:text-red-5 font-bold": "text1",
    "underline": "text2"
  }
}