Show HN: Make a business model canvas in your browser | Hacker News Reader

Show HN: Make a business model canvas in your browser

sbussard.github.io

295 points_9hey76 comments

The github project itself is at https://github.com/sbussard/canvas-sketch

Question: how do you save/load?

We had a similar idea for draw.io [1]

[1] https://www.draw.io/?splash=0&url=https://raw.githubusercont...

The whole state json-stringified and then stored as base64 in the localstorage. Looks like a valid solution for that amount of data.

I think the question should be restated as: how do you save to a file and load from a file? The use of localStorage means you can only have one version of a canvas per browser/device pair.

Maybe not ideal but you _could_ use the browser inspector and copy the data from local storage and send it around manually. Not suggesting this is a workable solution but if you just needed to get it off one computer to another.

Could just offer downloading the data as JSON in a file as well as having it in local storage?

Create a gist and support loading from a gist URL?

It's shareable between devices and people, and even editable if you pretty-print the JSON, rather than base64 encoding it.

I would probably support both options.

https://developer.github.com/v3/gists/#create-a-gist

put my contact info in a public gist and say goodbye to me as a business partner.

Yeah, good point.

You can make the gist non-public by default (set public=false), and perhaps gists are the wrong tool, but something akin to gists seem like a good way to do something like this. I know Dave Winer was using the DropBox API in this way for some of his outlining tools.

But your point is well made, one of the downsides of the "web" as a platform is that it's hard to know what happens with the data you save to a random web application. I've had experience with product managers loading entire customer lists of emails into random "email validation tool"s, which were clearly just honeypots for foolish people's data.

Why convert to Base64?

To save on bandwidth and storage, I would guess

By making it roughly 1/3 larger?

Oh yikes does it really? Ignore my misinformed comment...

An explanation here: https://en.wikipedia.org/wiki/Base64#Output_padding

It seemed easier to deal with / parse out of local storage. Maybe it wasn't 100% necessary. It looks like it's caused bugs for non-latin characters.

Do you have a link to the bugs? I had never seen that before.

https://github.com/sbussard/canvas-sketch/issues

the fix: https://github.com/sbussard/canvas-sketch/pull/16

A former version of the app I made a few years ago had the ability to download a json file with all your data. Then to open you would just drag the file from your computer and drop it on the canvas. But that obviously didn't work for mobile

Copy JSON to clipboard function?

brilliant!

This project could easily use FileSaver.js to download the JSON locally. You could then easily read it back. This is how I do it for my site that runs locally only.

I can't speak for the author, but I bet he would accept Pull Req if you made one :)

Just quick off topic: i use draw.io often. It's the best tool for mockups etc that I've come across, all things considered. Thx.

That's a nice technical implementation of the Business Model Canvas. However, you should check the licensing under which it has been published as the result of accademic research: https://strategyzer.uservoice.com/knowledgebase/articles/506...

>The Business Model Canvas, released under Creative Commons license, is open for building other approaches and variations on the concept. There have been a number of variations discussed and demonstrated here in the Hub and externally. Where variations have been made, recognition of the original source material must be included in the variation. The text and link Strategyzer.com should be clearly visible and legible under every canvas.

If you're interested in the topic, you should definitely check out https://strategyzer.com/ which is the company co-founded by the former PHD that developped the concept of the Business Model Canvas.

Can a concept really be restricted? I thought ideas were not patentable.

Who mentioned patents?

In the current US patent climate disaster it is not really a big leap to see something that is clearly not protected by copyright and then think "maybe they got a patent for it and throw licenses around because of that."

That does sound dubious. The specific graphics created by Strategyzer can be copyrighted with a Creative Commons license of course, but I can't see how the concept of the business model canvas can be protected.

The name may be trademarked of course.

Shameless plug: we built business model canvas building [1] into Aha! In addition to being able to create them, you can save them and put various versions into presentable notebooks [2] to see how they change over time or just to compare them. Also, it's configurable, so you can create a lean canvas or SWOT diagram or others [3]

[1] https://support.aha.io/hc/en-us/articles/205738519-Create-an...

[2] https://support.aha.io/hc/en-us/articles/360006871731-Custom...

[3] https://support.aha.io/hc/en-us/articles/360000716906-Create...

This should be made into an Electron app with load/save, and then sell licenses to it for $50 USD. ;)

For something like this, if you want low memory, use a piece of paper!

I imagine this is something you either have showing on a screen on the wall next to your dashboard, or open when you need to look at it. In either case, electron won't stop you or bottle-neck your system :)

I’m really bummed Chrome discontinued Chrome apps.

Basically what I really want is to be able to make electron like desktop apps but not ship and load an entire browser with it.

Chrome apps were light weight and you could do a lot of desktop like things with it.

Progressive web apps are nice but there’s a ton of things lacking.

Chrome apps always felt weird to me. They're not really separate from Chrome, but they.. live outside Chrome? And you have to launch them like a real app? Even though they're not real apps. It's just so weird. I would prefer an Electron app any day over those weird Chrome app things.

I know it's not exactly what you're looking for but for personal use anyone else wanting this sort of thing, this is how I display sites as apps (Google Calendar, Todoist)

google-chrome --app="https://sbussard.github.io/canvas-sketch/"

Replace google-chrome for the correct binary for your system

There is still Qt WebEngine as a "lite" Electron. Or if that is too objectionable you can use the WebView interface with a users browser and let the app run as a background process.

Electron (while inside Atom) started out its life as a WebView from WebKit.framework, but they realized there are too many downsides to that. So they forked Chromium to add it to a Node process and wired it into Node's libuv, which is all Electron really is. So yes it's heavier weight, but now you have Developer Tools built in.

What would be really awesome is if Electron somehow managed to use shared resources if the Chrome was already open and not be a giant memory hog.

That's the biggest downside to Electron I see. You can create some fast performant UIs in it, but just a blank view is a big memory hit.

Very nice and useful! I guess that's not your main concern, but when I tried to type some Hebrew characters the whole board disappeared (try שלום).

Good find! It has to do with base64 encoding. I'll add an issue to the project

Fix merged https://github.com/sbussard/canvas-sketch/pull/16

https://sbussard.github.io/canvas-sketch/

FYI to other business software developers: this does not refer to a "canvas" object in HTML 5 sense nor tying that to a business domain model object as we might expect, it's a Business tool for apparently brainstorming business ideas for people that don't already have a clear business idea.

You can find a BMC and a bunch of similar tools for free on https://www.businessmakeover.eu

I'd love to hear about peoples experience with this.

I have the book and I tried setting up a canvas a few times but I didn't find it very helpful. It might be because of nature of the projects that I tried it on, I am not sure. Can anyone tell me about a time where they got explicit value/insight from setting one up?

I have used the canvas a lot (bought the book too!) and found it an useful tool to externalize the thoughts in my head and make them concrete on paper. It's not a silver bullet though and you can create amazing canvases that ultimately lead nowhere.

I believe the reason why I'm not using the business model canvas anymore is because I've internalized most of its core principles and find it much easier to write down the core aspects of a business model in a text file. Much easier and less meaningless meta work (finding the right online tool, strictly following the canvas when it doesn't make sense in many industries/niches).

I've used them collaboratively quite a bit. They are a quick way to talk about different players you are working with and talking to, and the layout of the canvas gives you a common vocabulary to talk about how you are viewing different players. Early on at my current startups, we were doing quite a bit of discovery and talking about a lot of different organizations and a lot of different relationship options, and the canvas gave us a way to keep track of that while we were working on other things.

We still keep one up to date and use it for on-boarding and documentation of learning. It's not a heavy-weight process. Super light-weight.

If you get too formal about it, it's a waste of time, like UML.

It's part of the Lean Startup methodology. And the very first step in getting to MVP. Where I believe it is helpful is getting feedback. You have something concrete to show people. And hopefully their feedback will help you to crystallize your design.

To be clear, though, there is a difference between the business model canvas [1] and the lean canvas [2]

[1] http://creatorconsulting.com/wp-content/uploads/2014/05/Busi...

[2] http://3daystartup.org/wp-content/uploads/2014/02/Lean-Canva...

Successfully used Business Model Canvas to present new business model to a larger organisation's board and get approval to start a new business unit. I feel it made the presentation of the key benefits of the business model easier, because the board was familiar with the Canvas and thus there was more shared ground.

Cool! Fyi, when adding an item with 30+ characters, the item spills over to the next grid. Since you are already using css grid there are some css grid properties that handles minimizing/ wrapping values within a parent grid. Cheers!

Thanks for the feedback! I'll create an issue for that

Awesome! I think this tool is great. I would recommend adding to your future MVP is an info highlight to each block of the canvas, so the user doesn't have to research the type of questions he/she needs to fill the canvas.

Thanks! I'll add it to the backlog!

Nice use of CSS grid! Noticed special characters seem to break the site. e.g. …

Hey really cool. I like what and how you did it, it is appropriate level of storing data.

Few years ago I made a html version, so people can create number of canvases. Gitignore ignores anything starting with model- and you have business and lean canvas examples.

https://github.com/desireco/BusinessModelCanvasTemplate

Great, very clear and easy to use but are you meant to be able to share this. What is the intended use case?

if you are looking for a free online version of the business model canvas and many more templates, you can also try out our tool canvanizer.com as an alternative. This also supports sharing and collaboration through edit or readonly links. Does not build on local storage though.

bit of cross-selling never harms ;) thanks, will check it out. Already utilising various tools but always keen to find better alternatives.

It's for sketching out business ideas, kind of like a white board.

There's a whole open source toolkit for managing and sharing BMC avail on http://toolkit.builders/ which would profit a lot from your sneaky interface.

It looks OK. It's light on features and the UX isn't that great (why input popups at the top of the page?). Why not spend a bit more time on it before showing it off to a big audience?

I had absolutely no idea it was even going to be noticed. I posted an older version several years ago and no one paid attention.

The design is really nice. I'd add these things though:

- rearrange cards inside segments

- add a tooltip to the icon to each segment to briefly explain what's expected there or what are good examples

- change color of cards

these are good additions! Issue created!

Very cool seeing this here! Hope things are good out in Nashville!

Thanks Jared! Let me know the next time you're in town!

Could OP maybe post an example of a board to play around with?

Added to backlog. Thanks!

I have no idea what to do here, maybe pre-populate it when first time visiting to show the concept, add a button (with confirm) to start over?

Yeah I put an issue in the backlog to help https://github.com/sbussard/canvas-sketch/issues/9

There's a whole book dedicated to the topic if you're interested. It's a quick read. https://strategyzer.com/books/business-model-generation

That's really cool, but when I want to print it, it doesn't keep the business model canvas layout :/

Thanks for the feedback! I'll add it to the backlog

Where's the data stored?

In your browser's LocalStorage as a base64 encoded JSON string

I don't get it. Is this anything more than post it notes on a grid?

It's from this book https://strategyzer.com/books/business-model-generation

Very cool!

Reply on news.ycombinator.com