Recently, Janitor AI updated its class names and associated CSS styling, affecting bot bios and descriptions.

The updated class names and CSS selectors shared in this post were identified through inspection of Janitor AI’s front-end source code using browser DevTools. They are provided solely for cosmetic theming and creative customization by the community.

These class names are not officially documented or supported by Janitor AI and may change or break at any time without notice following a site update.

This information is shared for educational and creative purposes only.
No proprietary data, user data, or account credentials were accessed or extracted.

This is not affiliated with, endorsed by, or approved by JanitorAI and it's staff in any way.

i If you're having trouble integrating the codes into the character card, I recommend checking out Rocket's guide — it's a much more detailed visual guide that goes more in-depth than the one at the bottom of this bot.

If problems persist, try asking in the J.AI discord, as there's not much else I can do to help from my end.

Commonly used ones:

div _characterInfoMarkdownContent_123vi_223

_input_jv6cc_126

Currently looking for more.
This list is actively being updated as new class names are discovered. Check back for additions.

• ~101 class entries
  

• 28/04/2026
  - Updated 4+ classes thanks to permanent
  - Organized list from A-Z
  

• 29/04/2026
  - Added <p class="class_name"></p> To the personality section
  - Opened Definition
  

• 30/04/26
  - Updated _card_13n8k_2
  - Added _cardTitle_13n8k_402
  

• 1/05/26
  - Removed deprecated classes
  ( _viewAllStandalone_mi467_68, _segmentActive_kwwol_63, _segmented_kwwol_51, _content_1chl9_11, _characterMenu_128g5_496, _count_kwwol_25, _count_mi467_31)
  

• 16/05/2026
  - Updated changed classes
  ^Thanks again, permanent(puppy)^

A

_appModalBadge_xxqvx_134

_appModalContent_xxqvx_85

_appModalCta_xxqvx_195

_archiveButton_di476_217

_autoResizeTextarea_mrqt8_1

B

_banner_2x3bf_17

_bar_17iy7_26 pp-top-bar profile-top-bar pp-top-bar-inner

_baseOverlay_d0q9a_20

_betaBadge_ud2h5_65

_btn_6hekb_374

_btnPrimary_6hekb_407

_btnSecondary_6hekb_385

Btn2-purple

_button_biys2_21

C

_cancelButton_jv6cc_165

_cancelScheduleButton_1s17f_1202

_cardTitle_13n8k_402

_card_13n8k_2

_characterInfoMarkdownContent_123vi_223

_characterInfoMarkdownContent_1yi4w_5

_characterInfoMarkdownContent_9gldz_223

_characterInfoShinyBox_1yi4w_265

_characterInfoShinyBoxInner_1yi4w_286

_checkboxCard_exkyv_105

_checkboxCardError_exkyv_112

_container_ud2h5_3

_content_1az8j_11

_content_xxqvx_12

_count_138g0_7

_createButton_1jb5k_14 pp-top-bar-create-char profile-top-bar-create-char glow-on-hover

css-197qci7

css-1d22cyw

css-1jdnh42

css-1vh5zal

css-2lj9yr

css-7kiadw

css-z5908y

D

_detailModal_6hekb_544

E

_editScheduleButton_1s17f_1180

_expanded_2x3bf_208

_expandedInner_2x3bf_220

F

_filterButtonOpen_1vsdv_27

_footer_93ppg_1

_groupCount_6hekb_208

_groupItem_6hekb_160

H

_hintBox_2ljd6_74

_historyItem_10txd_1

_historyItemFocused_10txd_34

_holidays2025Pattern1_d0q9a_115

_holidays2025Pattern2_d0q9a_124

I

_iconError_wpa9q_294

_iconInfo_wpa9q_279

_iconSuccess_wpa9q_284

_iconWarning_wpa9q_289

image-input-dropzone

_inner_2x3bf_31

_input_1gzug_8

_input_exkyv_52

_input_jv6cc_126

_inputContainer_1cle1_26

_iosAlert_1s17f_263

_iosModalWarning_1s17f_544

_iosSelect_1s17f_805

_iosSettingItem_1s17f_46

_iosSettingsSection_1s17f_35

_iosStatusSection_1s17f_208

L

_loadMoreButton_wpa9q_458

M

_messageNavigation_1yi4w_348

_modal_6hekb_19

_modal_pru5r_15

_modal_ud2h5_292

_modalContent_1jhaa_166

_modalContent_wpa9q_692

_modalStatItem_ud2h5_364

_modalWarning_wpa9q_763

_moderationBlock_1s17f_320

_moderationHeader_1s17f_360

_moderationNotes_di476_369

_moderationNotification_di476_333

_moderationReason_1s17f_405

_moderationSubject_di476_360

_motionHeader_1s17f_1361

_motionModal_1s17f_1339

_motionWarning_1s17f_1459

N

_navButton_1yi4w_359

_notificationsButton_wpa9q_7

O

_option_pru5r_82

_otherInput_pru5r_156

P

_panel_mxoyb_172

pp-top-bar-logo profile-top-bar-logo glow-logo css-1bmggo3

_primaryButton_2ljd6_91

_priorityHigh_wpa9q_356

_priorityLow_wpa9q_364

_priorityMedium_wpa9q_360

_privacyNote_2x3bf_301

profile-badge-flex-outer Btn2-purple pp-pg-total css-72h1ey

R

retry-button

S

_scheduleInfoNote_1s17f_1106

_scheduleTypeOption_1s17f_1231

_scheduledInput_1s17f_887

_scheduledPreview_1s17f_972

_scheduledReleaseInfo_1s17f_1136

_scheduledReleaseSection_1s17f_863

_scheduledReleaseWarning_1s17f_876

_searchInput_6hekb_117

_showLess_1bk4j_26

_signupTextarea_45b6m_172

_statItem_ud2h5_121

_submitBtn_1gzug_172

T

_timeSelect_ud2h5_84

_toolbar_1oo8z_6

_tosBox_1gzug_119

_tosBoxError_1gzug_127

_trigger_6hekb_453

U

upload-text

Quick Tip:
You can stack multiple class names into a single paragraph tag instead of using separate ones. this lets you layer effects from different classes all at once.

Simple example:

div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone

<p class="div _characterInfoMarkdownContent_123vi_223 _trigger_6hekb_453 _autoResizeTextarea_mrqt8_1 image-input-dropzone">your text</p>

Made by Utkarsh on discord:

<p class="div iosStatusSection1s17f_208 iosStatusLine1s17f_223">Text <strong>Text</strong></p>

'Text'Text

<p class="div _iosStatusSection_1s17f_208 _iosStatusLine_1s17f_223">'Text' <a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="your-link-here"><strong>link</strong></a></p>

'Text' link

<p class="css-1jdnh42 _iosStatusLine_1s17f_223"><strong>Text Here</strong>your text here</p>

Text Hereyour text here

Just separate each class name with a space. Keep in mind the more you stack, the harder it is to figure out which one is causing issues if something breaks.

How To Use Them:
For a more in-depth visual guide on how to use them, check out Rocket's guide

Open your character bio field and click the </> button at the top right of the editor. This switches you to raw HTML view where you can see and edit the underlying code directly.

To apply a class, wrap your content in a paragraph tag like this:
<p class="YOUR_CLASS_NAME_HERE">Your Text Here</p>

For example:

<p class="div _characterInfoMarkdownContent_123vi_223">Your Text Here</p>

Just replace YOUR_CLASS_NAME_HERE With the one you want.
After editing, click Apply at the bottom of the HTML panel to save your changes.

credits aren't needed but my eyes see everything