82 comments

[ 5.0 ms ] story [ 54.9 ms ] thread
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?
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
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.
Looks nice!

Would be nice to have a comment option, cuz sometime keyword could have a looooooong description - it's good to have it hidden

Nice use of CSS grid! Noticed special characters seem to break the site. e.g. …
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.
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.
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.
Could OP maybe post an example of a board to play around with?
Where's the data stored?
In your browser's LocalStorage as a base64 encoded JSON string
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. ;)
(comment deleted)
(comment deleted)
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.

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
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.
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!
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!
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
Very cool seeing this here! Hope things are good out in Nashville!
Thanks Jared! Let me know the next time you're in town!
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?
(comment deleted)
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.

(comment deleted)
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.
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

FIX YOUR CREDIT SCORE FOR FREE PROMO... You get rip because you don't ask questions. Free Credit Report & Credit Score. * anonymous (group) in Russia (code) we work as team & we are one * (don't get ripped anymore) I hack into Facebook account/user I sale hacking software I hack into all mobile phones/apple I hack into any company bank account I can be hire for any hacking job I sell company leads/ we hack into company data base I sell good sender/ smtp mailer webmail local host sender I sell good scam page/grabber I hack into all kind of email/ using bolt zeus or rat I fix bad credit score Those are few main services, there are plenty more below: Do you need help in gaining access/passwords to Facebook, gmail, Instagram, bbm, yahoo-mail, snap chat, twitter, Hotmail, badoo, zoosk, various blogs, icloud, apple accounts etc. Password retrieval, breaching of bank accounts: (for local and international banks, block transfers, make transfers), clear debts, pay for bills at give a way rates, breach of web host servers, firewall breaches, application cracks, change of school grades, professional hacking into institutional servers, clearing of criminal records, mobile airtime recharge, key-logging, smartphone,tablet portable device hacks, pc hacks on any os and ip tracking and general tracking operations. Ip tracing ip hacking isp(internet service provider) hacking mobile number tracingtheft mobile recovering iPhone hacking /post software hacking recovering stolen data hard disk cloning twitter hacking Hotmail hacking Rediff mail hacking Yandex mail hacking Instagram hacking pinterest hacking dribble hacking YouTube channel hacking blogger hacking WordPress hacking WordPress cloning Cpanel hacking database dumping database editing database securing credit fraud recovering windows hacking wifi password cracking hacker. Are you looking for loan? I have a solution for you. Contact: email: speedlinkhacker at gmail.com annomyous10 at hackermail.Com hiremezeus at mail.Com sms: +1-(502)783-7516. http://tinyurl.com/llye4c6 service available 24hrs easy reliable and efficient