11 ms·

Histoire: A new way to write stories, powered by Vite

52 points by radus 3y ago

PaulHoule 3y ago
https://twitter.com/novus_rue/status/1476182586221215747 https://twitter.com/novus_rue/status/1476182586221215747
radus 3y ago
Though Storybook now supports Vite as well, I like Histoire because it cuts down on boilerplate, especially for Vue 3 projects.
arpowers 3y ago
Looks awesome. I always check for committed and professional open source devs before I consider a project. The devs behind this one are experienced Vue folks. Looking forward to giving it a try.
Biologist123 3y ago
Layman here. I was hoping this would be an AI tool which turns user stories into a web app. Seeking input from experts: how long until that day? Or is this that tool…?
- gremlinsinc 3y ago
  Yeah, I was expecting something having to do with book writing, or user stories. Honestly, I don't understand when/why UI became a 'story'. I get storybook because storybooks have pictures, so it's more about the picture than the words on the page. However, the tool does look nice, if the 'hook' for the site isn't that explanatory. I might like to try it on svelte, I wonder how hard it'd be to integrate with laravel+livewire+alpine stack, because there's nothing like this for that. Probably a big value too.
  - _jesse 3y ago
    I also thought it was going to be for publishing writings online. They're reusing the lingo from storybook, which is going to be familiar to a lot of people in the frontend space these days. It does look like a great tool, I would definitely give it a try first before going to storybook.
Taig 3y ago
I couldn't figure out what this is about without diving into the docs. The landing page left me mostly clueless.
- CharlesW 3y ago
  Yes, it's not good. This helped me: https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/ https://blog.logrocket.com/writing-interactive-component-sto... > With the release of Vue 3, a Storybook alternative named Histoire has gained some traction. In this blog post, we’ll explore how to create interactive documentation of UI components for Vue 3 projects. As with Storybook, Histoire is designed for making your life much easier to create living style-guides and component showcases.
- jsunderland323 3y ago
  I agree. I thought this was a substack competitor for the first minute.
- moritzwarhier 3y ago
  > Stories > Write stories to showcase and document your components. Until having used it, I was having similar questions about the domain of Storybook. But this sentence (first paragraph below the header and menu) sums it up clearly for every frontend developer IMO. Also this is linked and goes into more detail about what a "story" is: https://histoire.dev/guide/ https://histoire.dev/guide/
- Archelaos 3y ago
  I am still clueless. Is it an obfuscation tool?
nerdix 3y ago
First I thought it was a tool for writing user stories. Then I thought it was a tool for writing books. Then finally I discovered that it's a Storybook alternative. I think.
- deleted 3y ago
  [deleted]
dimmke 3y ago
>”Histoire is a tool to generate stories applications (or "books").” What a clever naming scheme! Nobody reads stories or books anymore, so when they see the word “story” they’ll automatically assume you mean UX Story! This isn’t ridiculously confusing at all.
- nonethewiser 3y ago
  I assumed it was a writing tool that fit into a developer workflow. Git integration, build step, etc. And to be clear when I say write I mean like a novel or blog post. Like with the English language.
  - dimmke 3y ago
    Yeah I was being sarcastic this is bad
- nannal 3y ago
  Thank you for helping me understand what this application is. I think,
- swyx 3y ago
  this is unfairly negative, Storybook started calling it stories and before them, PMs and UX researchers, to the point that it was an industry understood term long before Histoire came along. the overloading is unfortunate but happens all the time - we don't complain about "bug" or "fork".
  - forward-slashed 3y ago
    "Bug" and "fork" are industry standard terms, "stories" are not. Plenty of frontend developers exist who don't know the term. Overloading is fine. Ambiguous use of an overloaded term is not. What is one to think of when they see words like "write", "stories", and God forbid, "book"? Storybook stories, of course.
- stevage 3y ago
  Agreed. So it's basically a tool for documenting components, with an obnoxious name. Even the use of french. Why French? Because it's really so exotic?
kkarimi 3y ago
What’s the rationale behind supporting Vue and Svelte and not React/Solid?
- brianzelip 3y ago
  - Looks like some of the authors are Vue core team members - the project is Vite forward - looks like React and Solid (and Angular) are in the roadmap
UncleOxidant 3y ago
Oh... those kinds of stories. I was hoping it might help me finally get around to writing that novel.
deleted 3y ago
[deleted]
pmontra 3y ago
Put an example in the home page. I went to GitHub and I found some ts code in the examples directories but I could not find any story, if these stories are what books are made of. If they are something else I might have seen one without realizing it.
ericls 3y ago
Why do I need to care about what tool it is powered by?
- Timon3 3y ago
  Because if it's not powered by the same build tool as your project, you'll have fun duplicating your entire build config and finding compatible plugins for both platforms.
radus 3y ago
So I submitted without realizing that the landing page doesn't provide very much context, especially if you're not exposed to frontend stuff. Keep in mind that Histoire hasn't seen a 1.0 release yet. In short: The "stories" here are frontend components that are being rendered in isolation, with the ability to play with their params. It's also a nice way to document custom components in a project (this would be the "book" I guess). Storybook¹ is the mature project in this area. As for Vite it's an alternative to Webpack which has gained rapid popularity - I've enjoyed using for its relatively light configuration and very fast live reloading support. ⸺ ¹https://storybook.js.org/ https://storybook.js.org/ (much better landing page)
- stevage 3y ago
  Even as a frontend developer (mostly Vue, some React) it didn't make much sense to me. I've never heard of Storybook. I've never wanted to share UI components that I have made with the world. I do like Vite a lot, but I don't really see the relevance of the "powered by Vite" unless the whole thing is basically a sales pitch for Vite.
  - radus 3y ago
    For me it's more about documenting your components for my team/myself. I guess you can think of it as a framework for creating doc pages with interactive demos of components, as shown in this demo: https://vue3.examples.histoire.dev/story/src-components-basebutton-story-vue?variantId=src-components-basebutton-story-vue-1 https://vue3.examples.histoire.dev/story/src-components-base...
  - dcre 3y ago
    Setting aside the “why stories?” part (plenty of people use UX stories — I do, though I am ambivalent about them), the powered by Vite line does have some content to it: 1. If you’re already using Vite, you know it will integrate easily 2. If you’re not using Vite, if you know what Vite is, you at least know it’s fast and easy to configure 3. The fact that it’s made by a Vue core dev means it’s likely very good. There are a number of such “powered by Vite” tools with good reputations
whalesalad 3y ago
I cannot for the life of me figure out what this is. Is this considered a story? https://vue3.examples.histoire.dev/story/tailwind?variantId=border-color https://vue3.examples.histoire.dev/story/tailwind?variantId=...
yladiz 3y ago
I'm not at all knowledgeable about Vue and its libraries, community, etc., so with a grain of salt, why does it seem that Vue makes Vue versions of various libraries, like Vite (Webpack), Vitest (Jest), and now Histoire (Storybook, also an annoying thing to type)? This is not to say that there shouldn't be new tools that compete with existing ones, since generally the more tools the better the ecosystem as a whole is, but it's confusing to me that Vue somehow has this NIH syndrome and new tools crop up specifically for it.
- dcre 3y ago
  Part of the answer is surely that the tools you’re talking about are dramatic improvements on the originals, speaking as a longtime Webpack and Jest user who now uses Vite and Vitest. Neither is Vue-specific, by the way — I use them with React. (It looks like Histoire doesn’t have a React adapter yet, but I’m sure it will soon.) It seems to me — as someone who uses these tools but has no inside knowledge of the Vue community — that this community just has a really well-developed engineering culture and is producing tools in line with that culture that are all really good and integrate well together. It’s hard to understand why you wouldn’t want that if you could get it!
Timon3 3y ago
I've used Histoire a good bit ago (just after it was first released), and my experience has been great! It's what I wanted Storybook to be, especially regarding performance. Kudos to the devs for finally creating an alternative that can stand on its own!

52 points by radus 3y ago

https://twitter.com/novus_rue/status/1476182586221215747 https://twitter.com/novus_rue/status/1476182586221215747

Though Storybook now supports Vite as well, I like Histoire because it cuts down on boilerplate, especially for Vue 3 projects.

arpowers 3y ago

Looks awesome. I always check for committed and professional open source devs before I consider a project. The devs behind this one are experienced Vue folks. Looking forward to giving it a try.

Biologist123 3y ago

Layman here. I was hoping this would be an AI tool which turns user stories into a web app. Seeking input from experts: how long until that day? Or is this that tool…?

gremlinsinc 3y ago
Yeah, I was expecting something having to do with book writing, or user stories. Honestly, I don't understand when/why UI became a 'story'. I get storybook because storybooks have pictures, so it's more about the picture than the words on the page. However, the tool does look nice, if the 'hook' for the site isn't that explanatory. I might like to try it on svelte, I wonder how hard it'd be to integrate with laravel+livewire+alpine stack, because there's nothing like this for that. Probably a big value too.
- _jesse 3y ago
  I also thought it was going to be for publishing writings online. They're reusing the lingo from storybook, which is going to be familiar to a lot of people in the frontend space these days. It does look like a great tool, I would definitely give it a try first before going to storybook.

Taig 3y ago

I couldn't figure out what this is about without diving into the docs. The landing page left me mostly clueless.

CharlesW 3y ago
Yes, it's not good. This helped me: https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/ https://blog.logrocket.com/writing-interactive-component-sto... > With the release of Vue 3, a Storybook alternative named Histoire has gained some traction. In this blog post, we’ll explore how to create interactive documentation of UI components for Vue 3 projects. As with Storybook, Histoire is designed for making your life much easier to create living style-guides and component showcases.
jsunderland323 3y ago
I agree. I thought this was a substack competitor for the first minute.
moritzwarhier 3y ago
> Stories > Write stories to showcase and document your components. Until having used it, I was having similar questions about the domain of Storybook. But this sentence (first paragraph below the header and menu) sums it up clearly for every frontend developer IMO. Also this is linked and goes into more detail about what a "story" is: https://histoire.dev/guide/ https://histoire.dev/guide/
Archelaos 3y ago
I am still clueless. Is it an obfuscation tool?

nerdix 3y ago

First I thought it was a tool for writing user stories. Then I thought it was a tool for writing books. Then finally I discovered that it's a Storybook alternative. I think.

deleted 3y ago
[deleted]

dimmke 3y ago

>”Histoire is a tool to generate stories applications (or "books").” What a clever naming scheme! Nobody reads stories or books anymore, so when they see the word “story” they’ll automatically assume you mean UX Story! This isn’t ridiculously confusing at all.

nonethewiser 3y ago
I assumed it was a writing tool that fit into a developer workflow. Git integration, build step, etc. And to be clear when I say write I mean like a novel or blog post. Like with the English language.
- dimmke 3y ago
  Yeah I was being sarcastic this is bad
nannal 3y ago
Thank you for helping me understand what this application is. I think,
swyx 3y ago
this is unfairly negative, Storybook started calling it stories and before them, PMs and UX researchers, to the point that it was an industry understood term long before Histoire came along. the overloading is unfortunate but happens all the time - we don't complain about "bug" or "fork".
- forward-slashed 3y ago
  "Bug" and "fork" are industry standard terms, "stories" are not. Plenty of frontend developers exist who don't know the term. Overloading is fine. Ambiguous use of an overloaded term is not. What is one to think of when they see words like "write", "stories", and God forbid, "book"? Storybook stories, of course.
stevage 3y ago
Agreed. So it's basically a tool for documenting components, with an obnoxious name. Even the use of french. Why French? Because it's really so exotic?

kkarimi 3y ago

What’s the rationale behind supporting Vue and Svelte and not React/Solid?

brianzelip 3y ago
- Looks like some of the authors are Vue core team members - the project is Vite forward - looks like React and Solid (and Angular) are in the roadmap

UncleOxidant 3y ago

Oh... those kinds of stories. I was hoping it might help me finally get around to writing that novel.

deleted 3y ago

[deleted]

pmontra 3y ago

Put an example in the home page. I went to GitHub and I found some ts code in the examples directories but I could not find any story, if these stories are what books are made of. If they are something else I might have seen one without realizing it.

ericls 3y ago

Why do I need to care about what tool it is powered by?

Timon3 3y ago
Because if it's not powered by the same build tool as your project, you'll have fun duplicating your entire build config and finding compatible plugins for both platforms.

radus 3y ago

So I submitted without realizing that the landing page doesn't provide very much context, especially if you're not exposed to frontend stuff. Keep in mind that Histoire hasn't seen a 1.0 release yet. In short: The "stories" here are frontend components that are being rendered in isolation, with the ability to play with their params. It's also a nice way to document custom components in a project (this would be the "book" I guess). Storybook¹ is the mature project in this area. As for Vite it's an alternative to Webpack which has gained rapid popularity - I've enjoyed using for its relatively light configuration and very fast live reloading support. ⸺ ¹https://storybook.js.org/ https://storybook.js.org/ (much better landing page)

stevage 3y ago
Even as a frontend developer (mostly Vue, some React) it didn't make much sense to me. I've never heard of Storybook. I've never wanted to share UI components that I have made with the world. I do like Vite a lot, but I don't really see the relevance of the "powered by Vite" unless the whole thing is basically a sales pitch for Vite.
- radus 3y ago
  For me it's more about documenting your components for my team/myself. I guess you can think of it as a framework for creating doc pages with interactive demos of components, as shown in this demo: https://vue3.examples.histoire.dev/story/src-components-basebutton-story-vue?variantId=src-components-basebutton-story-vue-1 https://vue3.examples.histoire.dev/story/src-components-base...
- dcre 3y ago
  Setting aside the “why stories?” part (plenty of people use UX stories — I do, though I am ambivalent about them), the powered by Vite line does have some content to it: 1. If you’re already using Vite, you know it will integrate easily 2. If you’re not using Vite, if you know what Vite is, you at least know it’s fast and easy to configure 3. The fact that it’s made by a Vue core dev means it’s likely very good. There are a number of such “powered by Vite” tools with good reputations

whalesalad 3y ago

I cannot for the life of me figure out what this is. Is this considered a story? https://vue3.examples.histoire.dev/story/tailwind?variantId=border-color https://vue3.examples.histoire.dev/story/tailwind?variantId=...

yladiz 3y ago

I'm not at all knowledgeable about Vue and its libraries, community, etc., so with a grain of salt, why does it seem that Vue makes Vue versions of various libraries, like Vite (Webpack), Vitest (Jest), and now Histoire (Storybook, also an annoying thing to type)? This is not to say that there shouldn't be new tools that compete with existing ones, since generally the more tools the better the ecosystem as a whole is, but it's confusing to me that Vue somehow has this NIH syndrome and new tools crop up specifically for it.

dcre 3y ago
Part of the answer is surely that the tools you’re talking about are dramatic improvements on the originals, speaking as a longtime Webpack and Jest user who now uses Vite and Vitest. Neither is Vue-specific, by the way — I use them with React. (It looks like Histoire doesn’t have a React adapter yet, but I’m sure it will soon.) It seems to me — as someone who uses these tools but has no inside knowledge of the Vue community — that this community just has a really well-developed engineering culture and is producing tools in line with that culture that are all really good and integrate well together. It’s hard to understand why you wouldn’t want that if you could get it!

Timon3 3y ago

I've used Histoire a good bit ago (just after it was first released), and my experience has been great! It's what I wanted Storybook to be, especially regarding performance. Kudos to the devs for finally creating an alternative that can stand on its own!