7 | 12 | 13 | Pages in Storybook 14 | 15 | We recommend building UIs with a 16 | 20 | component-driven 21 | 22 | process starting with atomic components and ending with pages. 23 | 24 | 25 | Render pages with mock data. This makes it easy to build and 26 | review page states without needing to navigate to them in your 27 | app. Here are some handy patterns for managing page data in 28 | Storybook: 29 | 30 | 31 | 32 | Use a higher-level connected component. Storybook helps you 33 | compose such data from the "args" of child component stories 34 | 35 | 36 | Assemble data in the page component from your services. You 37 | can mock these services out using Storybook. 38 | 39 | 40 | 41 | Get a guided tutorial on component-driven development at 42 | 46 | Storybook tutorials 47 | 48 | . Read more in the 49 | 53 | docs 54 | 55 | . 56 | 57 | 58 | Tip Adjust the width of the canvas with 59 | the 60 | 65 | 66 | 70 | 71 | 72 | Viewports addon in the toolbar 73 | 74 | 75 |