Story URL doesn't update when text control contains special characters

[claytonleonardcook]

Summary

While working on a story with a title and description, I decided to input line breaks into them:

The above resulted in the URL being http://localhost:6006/?path=/story/example-weeklymeetup--square&args=description:World, which shows the proper description but not the title.

If I then make the title "Hello World" with no line breaks like:

The above results in the URL being http://localhost:6006/?path=/story/example-weeklymeetup--square&args=title:Hello+World;description:World. Which shows the proper title and description.

While testing line breaks I also came across the following characters that cause the query parameters to not populate.
They are :, ;, /, \, !, @, #, $, %, ^, &, *, (, ), +, =, ?, <, >, `, ~, {, [, }, ], |, ,, ..

Additional information

"devDependencies": {
    "@eslint/js": "^9.36.0",
    "@storybook/addon-docs": "^10.1.0-alpha.3",
    "@storybook/icons": "^1.4.0",
    "@storybook/react-vite": "next",
    "@types/express": "^5.0.5",
    "@types/node": "^20",
    "@types/react": "^18.2.65",
    "@types/react-dom": "^18.2.21",
    "@vitejs/plugin-react": "^4.7.0",
    "auto": "^11.3.0",
    "boxen": "^8.0.1",
    "eslint": "^9.36.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-storybook": "next",
    "npm-run-all2": "^8.0.4",
    "prettier": "^3.6.2",
    "prompts": "^2.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "next",
    "ts-dedent": "^2.2.0",
    "tsup": "^8.5.0",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.44.1",
    "vite": "^7.0.5",
    "zx": "^8.7.1"
  },

// .storybook/main.ts

import { defineMain } from '@storybook/react-vite/node';

const config = defineMain({
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-docs', import.meta.resolve('./local-preset.ts')],
  framework: '@storybook/react-vite',
});

export default config;

Create a reproduction

No response

[dosubot[bot]]

Hi @claytonleonardcook! I'm Dosu and I’m helping the storybook team.

Storybook intentionally omits args with special characters (including line breaks and most punctuation) from the URL for security reasons. Only alphanumeric characters, spaces, underscores, and dashes are allowed in URL args; anything else is ignored and not reflected in the URL, though you can still use those values in Controls and story code. This is a documented limitation and not a bug—there’s no configuration to change this behavior. If you need to share story state with special characters, consider using the Controls panel directly or mapping simple values to complex ones in your argTypes. More details are in the docs and implementation.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[claytonleonardcook]

Attaching this link since it didn't come up when searching.

https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url