Created Updated Archived since
How to make your own super cool and awesome js-slash-runner VN in SillyTavern: Step 1: Install js-slash runner (https://github.com/N0VI028/JS-Slash-Runner)
Step 1.5 (Optional): Go into the js-slash-runner extension dropdown and set 渲染深度/Rendering Depth to 1. This helps avoid lag.
Step 2: Import the Regex (https://uraurabots.neocities.org/bots/regex/regex-[vn]_scene_renderer.json) as a scoped regex into your character card. Replace the url in IMG_BASE with the url to your site and edit NAME_MAP to reflect the names of your characters. By default, the id of char1 is assigned to the name of the card. If you have only one character and the card is named the same of that character then you may not need to change that.
Step 2.5 (Optional): Edit the CSS to change the colors to your liking.
Step 3:
Upload files to your website. Backgrounds should be named bg_LOCATION_WEATHER.png and be 1920x1080. Characters should be named SPEAKER_EXPRESSION.png and be 1080 x 1620 with the bottom of the character's feet at the bottom of the image.
The speaker should be the ID you assigned in NAME_MAP.
For example, char1_happy.png will show {{char}} with a happy expression.
The files MUST be a .png unless you want to go digging around in the guts of the html to change it to webp or something. Sorry about that.
Step 4: Add the Post-History Instructions. Replace the available backgrounds, weathers, characters, and expressions with the names corresponding to the files you have uploaded.
Step 5: Write your greeting using the VN format. Start by setting the background and then continuing with narration and speech. Example: [bg_forest_dusk] [narrator] The cedars groaned as the wind shifted. [char1_curious] You smell that? [narrator] Smoke. Faint, but unmistakable. [char1_alert] Stay close.
Notes: CGs, backlogs, and BGM or other types of audio aren't currently supported in this template. Maybe in the next update? Narrator is a special character. There's nothing you need to do to get that to work, just use the [narrator] tag. You can't change backgrounds in the middle of a scene. If you try, only the final background set will apply. Keep background changes to the first line for clarity. You also can't reposition the character sprite or show multiple sprites at once. Only the active speaker is visible.
First message25 tokens
[bg_placeholder_clear] [narrator] What a beautiful day in the neighborhood. [char1_happy] Any questions?
Post-history instructions
You output scenes in this exact format. Every response is a scene. First line: [bg_LOCATION_WEATHER] — sets the background. Following lines: [SPEAKER_EXPRESSION] dialogue or narration text. Special speaker: [narrator] for scene description (no sprite shown, italic text). {[char}} speaker tag: char1 (e.g. [char1_neutral], [char1_happy], [char1_alert]). Rules:
- ALWAYS start with a [bg_...] line.
- One beat per line. Keep beats short — one to three sentences each.
- Use [narrator] for description, action, atmosphere.
- Use [char1_EXPRESSION] for the character speaking. Expression is one word.
- Do not output any other text, code, or commentary. Only the bracketed scene. Example: [bg_forest_dusk] [narrator] The cedars groaned as the wind shifted. [char1_curious] You smell that? [narrator] Smoke. Faint, but unmistakable. [char1_alert] Stay close.
Available backgrounds: placeholder, village, forest, forestnight Available weathers: clear, rain, snow
Placeholder is a special background, use when there are no other appropriate backgrounds.
Available characters: char1 Available expressions: neutral, happy, embarrassed, sad, angry, curious
Extensions: regex_scripts (their contents are in the Raw tab)
1 file
- .pngpng_cardspec 3.0original
113.5 KB512×768first seen 0bd7859977e8a099
version v1
Opens with the tab.