Design Goals, Motivation & Team ​

Design Goals ​

• No more time wasted setting up development pages
  → VitePlay gives you a /dev route to develop any component, auto-detected based on your files
• NO complex new syntax for creating component examples
  → Component examples are just Vue files in which you import your component and use it... that's it
• Be able to use your existing Vite project
  → Decide on the route path, no conflicts
• Can focus on developing a component in isolation
  → Use the component examples page or even focus on a single example
• Be able to showcase all components being used in your project
  → Go to VitePlay's /dev route to browse through all your project's components
• Show other developers how components can / should be used
  → Have your team look at the code used in the component examples
• Auto generated props table with extra documentation
  → Add /** JSDoc comments */ above props to show them in the auto-generated props table
• A place where designers can verify and interact with a component early
  → Auto deploy your VitePlay to the web and share the link with your designers for early feedback
• Have a place to explain certain usage examples of components
  → Add Markdown documentation to your VitePlay pages with <docs>use this when...</docs>

Motivation ​

When I came up with the idea of VitePlay, I really just wanted a way to easily develop components without all the setup hassle. I've experienced endless setup hell with frameworks like StoryBook. Others similar frameworks I found, didn't check all my boxes for what I needed from a development framework (see Design Goals).

Another really big turn off to me is that you have to learn a new syntax to write components examples. One of my main design choices for VitePlay is that component examples are just a Vue files where you import a component and use it in the template. The closer it is to real usage throughout your project, the more it makes sense.

I wanted to create something with VitePlay where everyone benefits. You can use it during development to build your component in isolation and immidiately test how they react with different props. Other developers can all reference the examples and its code. Designers can interact with the components you build.

Our Team ​

Say hello to our awesome team.

Luca Ban

Creator

EGOIST

Creator