In Storybook v8, it properly removes whitespace and newlines attributes when appropriate:
\n
\nIn Storybook v9, looks like neither of those are happening:
\n
\nAny help is appreciated!
\nAdditional information
\nstorybook 9.0.15
\nangular 19.2.6
import type { StorybookConfig } from '@storybook/angular';\n\nconst config: StorybookConfig = {\n stories: [\n '../src/lib/**/*.mdx',\n '../src/lib/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n ],\n addons: [\n '@chromatic-com/storybook',\n '@storybook/addon-themes',\n '@storybook/addon-designs',\n '@storybook/addon-docs',\n ],\n framework: {\n name: '@storybook/angular',\n options: {},\n },\n staticDirs: ['./static'],\n};\n\nexport default config;Create a reproduction
\nNo response
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"@dosu thanks for the quick reply! I went with Prettier since I've already got it installed. Looks like the formatting is back to how it was before.
\nformatCode.ts
\nimport * as prettier from 'prettier/standalone';\nimport * as prettierPluginHtml from 'prettier/plugins/html';\n\nexport async function formatCode(code: string) {\n return await prettier.format(code, {\n parser: 'angular',\n plugins: [prettierPluginHtml],\n });\n}preview.ts
\ndocs: {\n source: {\n transform: async (code: string) => {\n return await formatCode(code);\n },\n },\n}Appreciate the help!
","upvoteCount":0,"url":"https://github.com/storybookjs/storybook/discussions/32008#discussioncomment-13723716"}}}
-
SummaryI currently use Storybook with Angular, and have a custom template for components that rely on Here's the template I have for my button component: render: ({ content, start, end, ...args }) => ({
props: {
...args,
click: action('click'),
},
template: `
<button ui-button ${argsToTemplate(args)} (click)="click($event)">
${start ? `<ui-icon kind="${start}" uiSlot='start' />` : ''}
${content}
${end ? `<ui-icon kind="${end}" uiSlot='end' />` : ''}
</button>
`,
}),In Storybook v8, it properly removes whitespace and newlines attributes when appropriate: 
In Storybook v9, looks like neither of those are happening: 
Any help is appreciated! Additional informationstorybook 9.0.15 import type { StorybookConfig } from '@storybook/angular';
const config: StorybookConfig = {
stories: [
'../src/lib/**/*.mdx',
'../src/lib/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
addons: [
'@chromatic-com/storybook',
'@storybook/addon-themes',
'@storybook/addon-designs',
'@storybook/addon-docs',
],
framework: {
name: '@storybook/angular',
options: {},
},
staticDirs: ['./static'],
};
export default config;Create a reproductionNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Hi @cocco3! I'm Dosu and I’m helping the storybook team. Storybook v9 changed how it formats and sanitizes Angular source code for display in Docs, which can affect whitespace and attribute cleanup compared to v8. The formatting pipeline now relies on internal sanitization utilities, and the default behavior may not strip whitespace/newlines as before. You can override or post-process the displayed source using the export const MyButton = {
// ...your story config
parameters: {
docs: {
source: {
transform: (code) =>
code
// Remove leading/trailing whitespace on each line
.split('\n').map(line => line.trim()).join('\n')
// Remove empty lines
.replace(/^\s*$(?:\r\n?|\n)/gm, ''),
},
},
},
};You can adjust the transform function to fit your formatting needs. This approach works per-story or can be applied globally via preview parameters. The transform runs after Storybook’s internal sanitization, so you have full control over the final output shown in Docs and the code panel. For more details, see the implementation in If you need to exactly match v8’s formatting, you may need to experiment with your transform function to replicate the previous whitespace and attribute handling. To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
-
|
@dosu thanks for the quick reply! I went with Prettier since I've already got it installed. Looks like the formatting is back to how it was before. formatCode.ts import * as prettier from 'prettier/standalone';
import * as prettierPluginHtml from 'prettier/plugins/html';
export async function formatCode(code: string) {
return await prettier.format(code, {
parser: 'angular',
plugins: [prettierPluginHtml],
});
}preview.ts docs: {
source: {
transform: async (code: string) => {
return await formatCode(code);
},
},
}Appreciate the help! |
Beta Was this translation helpful? Give feedback.
-
|
Great to hear that worked! Using Prettier with the 'angular' parser is a solid way to keep your code snippets consistently formatted in Storybook Docs. Storybook fully supports async transform functions like yours, so your setup is right in line with how Docs source customization is intended to work. One thing to keep in mind: if you have a large number of stories or very complex templates, formatting every snippet with Prettier at runtime could add a bit of overhead to Docs rendering. If you notice any slowdowns, you might consider caching results or formatting only when necessary. Otherwise, your approach is robust and should stay compatible as Storybook evolves. Let me know if you run into any other quirks or need help with further customization! To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
@dosu thanks for the quick reply! I went with Prettier since I've already got it installed. Looks like the formatting is back to how it was before.
formatCode.ts
preview.ts
Appreciate the help!