Show HN: Randomly create beautiful website layouts | Hacker News Reader

Show HN: Randomly create beautiful website layouts

shuffle.dev

317 pointskemyd89 comments

Hey!

We wondered what to do to make building layouts even faster while adding more fun elements to our daily work. After a while, the inspiration came! Why not randomize the components while having fun, like at a slot machine in a casino?

The idea generator combines available UI components into finished layouts. You choose the technology, the library, click "Shuffle!" and boom, ready-made layout. Click again, and you have a new layout.

Based on our No AI®, and No Blockchain®, and Pure Random® technology. ;)

What do you think?

Congratulations on the launch!

I like that it's possible to tryout the editor without login.

Could you consider adding some minimalist, text-focused, animation-free, no-framework & accessibility-friendly layouts? It's unlikely that those who are already committed to building minimalist websites would use such a tool, But those who are new to web development and use your tool could get know that minimalism is still an option.

P.S. I've added Shuffle to my curated list of startup tools at https://startuptoolchain.com/#website .

We're bootstrapping our SaaS, and all resources are precious. We can't build niche solutions and that's why we focus on the most popular frameworks. If we find a popular framework that is "minimalist, text-focused, animation-free, accessibility-friendly" we may consider adding it.

PS. Thanks for adding us!

I think it's a great idea, but perhaps it's not different enough from a collection of templates that you can scroll through (which are also in some "random" order, of course)?

Hey, if you don't trust our random algorithms, you can browse all our UI components linearly here: https://shuffle.dev/components

I spent whole afternoon today thinking which template kit to buy so that I get nice set of component with neat design. There were so many of them so it was tough choice. But i think i’m going to get lifetime access to your service instead. I just wonder if you are planning on adding more components in different design style? Like the Tailwind CSS brutalist style (i think codeacademy uses something similar)

We add new UI libraries every month, and we will create them in different styles, for sure. At the moment, Cronos UI may be closest to the style you're looking for: https://shuffle.dev/components/all/cronos/headers

How many layers do you use for your Pure Random network? How do you train the randomness? How big is your random seed?

Also, I have heard that NoBlockchain is web scale. Can you confirm this?

Tough questions! I would have to ask our CTO, but here in Poland, it's already Friday evening, so I'll leave him alone for now ;)

From my side, I can say that Shuffle contains 3,700 UI components, and combinations are formed using them.

Very nice! I like the idea of randomness.

For my website business I made something alike. It combines some general styles with random colors. Some very ugly things are possible with it. ;) But it also has some preset templates that give you an idea of how nice it can look.

https://try.hellowebsite.online/quickdesign/ (best tested on a screen bigger than your smartphone)

Good luck with your project! :)

Thanks, you too!

Wow!

I like the idea and the execution very much.

However, the pricing model is not so much my taste. The Lifetime license seems somewhat cheap, but $24 per month feels a bit expensive for a casual user.

The $24/mo is probably to capture the users who will only generate a single website, which is probably most people. $24 for a website design is a very fair price, but I imagine their subscriptions will have a ton of churn.

Hey, thanks for your feedback. We have plans to remove lifetime licenses early next year.

Glad I got in on lifetime before you stopped offering it :)

Can you buy the layouts as NFTs?

Tee hee

> What do you think?

Doesn't load in the DuckDuck<Go browser app (Android), simpky kerps spinning its wheels ...

Hey, thanks for reporting!

To be more specific: works fine under DuckDuckGo (app v5.102.3) on Android 11 (phone) but not under DuckDuckGo (app v5.102.3) tablet on Android 9.

The four buttons on the left could use some tooltips to explain their jobs, btw.

Love that no-buzzword approach (:

Really gr8. Clever idea :)

Thanks!

Why do you start every reply with "Hey"? This thread reads like astroturf promotion.

I didn't expect this post to be so popular, so I said "hey" to the first people and then didn't want others to be sad that I didn't say "hey" to them.

Wonderful idea, great implementation!

Would love to see you guys partnering with TailwindUI somehow. That's my default go-to ui widgets library (it's not open source, so it might be challenging to find a proper partnership model with them).

Just bought a lifetime subscription. And as I already do have subscription - my last recommendation is to switch to monthly subscription model as soon as you can. Monthly subscriptions is just so much more profitable pricing model:)

Congrats again on shipping great product!

Edit: typos.

Could pay for lifetime. Would never pay for monthly for this service.

Thanks for the kind word and your insights! We're investing in our UI libraries, and I hope we become your "default go-to UI widgets library" soon ;)

Haha - wonderful, good plan, fingers croseed! :)

You used to be able to import TailwindUI’s components to Shuffle’s VSCode extension, but I’m not sure if that is still the case (or if it was ever condoned).

Hey, we allowed uploading Tailwind UI (as a ZIP archive) into our editor if you had a license and access to sources. Of course, we didn't sell access to their library.

We will open this feature to any UI library in the future. However, we put it on hold because (1) it supports just one format (ZIP archive with category -> components in separated HTML files), (2) development of our UI libraries is more important to us at this moment :)

Oh yes, didn’t mean to imply it was anything nefarious and I really enjoyed having that flexibility/using your product! Have had a lifetime license for around 6 months now and you guys are doing a great job!

How about other open source component libraries like Vuetify? Do you plan adding them in the future?

I believe tailwind ui’s license agreement specifically forbids using it in website generators

It was not really a website generator when in the VSCode extension. It was more of a copy and paste into your editor, with a easier way of viewing the components available (e.g., via dropdown in the editor).

This is neat! I’ll add it to my box of no/low-code tools.

I do feel like not letting the homepage itself shuffle its layout is a missed opportunity for showcasing the product.

Interesting idea!

Why does every layout, template and site-builder tool assumes all websites are a three-page thing, with big blocks of images and one or two products?

Do you actually visit such sites on a daily basis? Last time I did it was a page for a hip local barber shop.

How about a bit more complexity for the sake of realism?

A million layouts that will make you look like everybody else ;)

Plot twist -> You can customize it in our visual editor ;)

Is there "original" "web design" that is easy to use?

Unless we're talking about art projects, or front end developers' portfolios, I don't really want particularly "original" web design - especially in terms of layout and navigation.

So the output is markup, CSS and JS and I can take that and do whatever I want with it? Similar to Bootstrap Studio, if you're familiar with that tool?

I'm intrigued :) Two questions:

- On the VS Code page a coming WordPress integration (?) is mentioned. Can you elaborate on what that is, and went it might ship?

https://shuffle.dev/visual-studio-code

- I didn't see any mention of accessibility. Can you speak to that? Please :)

I love this idea. Simply put there are far too many "web designers" (read: don't know a span from a div) that simply don't add much value. This feels like their far more worthy replacement. Cheers!

Hey,

Yes, we export HTML/CSS and source files (Scss or Tailwind JS config).

Here you have example projects exported: https://shuffle.dev/static/files/example.zip

We will release the WordPress theme export in December. It won't be an integration / WordPress plugin. You'll still use Shuffle online, and when exporting the project, it has the format supported by WordPress (support for navigations, posts, etc.)

Accessibility - There is vast room for improvement.

I recommend you to check the ZIP archive above (you can download it from our website when exporting a project, too) and verify it will work for you.

All good answers. I certainly under it's a WIP. Thanks.

I've been a shuffle.dev user for a very long period. After some time I learned the CSS and HTML to the point I no longer need Shuffle, but still - one of my fav web builders.

Good for you! And thanks for the kind word.

Just for clarification for other readers: Shuffle is not just a low-code builder. We also have a catalog of UI libraries, so you also don't need to know how to design things. :)

I see you submitted the same link yesterday but didn't get any traction. Genuinely curious if HN allows consecutive re-submissions? Couldn't find anything in the guidelines / dang's comments either.

Anyway, I'm working on a Show HN myself and it would be great to know if it breaks any rules to submit the same project again especially if it doesn't get traction previously.

From FAQ (https://news.ycombinator.com/newsfaq.html)

>Are reposts ok?

>If a story has not had significant attention in the last year or so, a small number of reposts is ok. Otherwise we bury reposts as duplicates.

>Please don't delete and repost the same story. Deletion is for things that shouldn't have been submitted in the first place.

Hey, I read in an article that I found on Hacker News that "a small number of reposts is ok." They recommended trying with a different title and waiting 1-3 days between reposts.

What I can recommend you personally is.. don't use "click bait" title. My first submission had this kind of title (even if mathematically it has been correct).

Dummy question from a non-front-end dev:

What is the simplest way to host this project as it is on the web? (as a static page, no additional functionality)

I’ve been self-hosting websites for years on a VPS but as I have been using Cloudflare for DNS management and for their CDN features, I made the jump over to Cloudflare Pages a few days ago.

Cloudflare Pages was trivially easy to set up, complete with GitHub integration and I can heartily recommend it.

https://pages.cloudflare.com/

The sites I’m hosting are plain old static sites. I have a separate private repository for each site on GitHub, with all of the html files and the few images and such that the sites have, just as I always had, but now when I push commits to these repos they are automatically pulled and deployed by Cloudflare Pages and basically all I had to do was to enable GitHub integration, choose the repository, tell Cloudflare how to “build” it, which because everything is static the “build” command in my case is simply:

    cp -R htdocs dist

With htdocs just being a directory of static content inside of any of my website repositories for the site in question, to keep the content I want to serve separate from things like the README.md and other files that I also have in each repo.

Then I told Cloudflare Pages that the “build” output is in the “dist” directory.

It’s great!

Try out Netlify, their developer experience is excellent and the platform can grow with you if you need more features beyond the free tier.

Hey,

We export standard HTML/CSS files (or JS / JSX for Material-UI libraries).

You can publish them via Netlify (as mentioned above) or any other hosting for static pages. You can check examples of exported sources here: https://shuffle.dev/static/files/example.zip (the link is also available in our editor when exporting a project)

Huge fan of the designs of Shuffle and they have been shipping constantly for years.

If you're looking for a website builder to import them into and host I built https://versoly.com/

It has a code editor to import/edit/export code and has a no-code mode for marketers.

When I freelanced my #1 problem was clients asking for small updates such as a button changes, padding adjustments and adding new sections. I built Versoly to solve that while still being enjoyable for developers.

Usual questions from devs

- Does it include hosting? Yes

- Where is it hosted? AWS on s3/cloudfront

- Can i export code? yes

- Do the pages load fast? 99/100 on mobile

This is a great execution on your part, I have been planning to create a website, and then I saw this post; I had fun tinkering at the shuffle editor. I think I'll consider this one for later.

Great! :D

...linking to the homepage https://shuffle.dev/ so that alternative options mentioned here can be picked up by SaaSHub https://www.saashub.com/shuffle-dev-reviews

This looks really cool--I'm interested to try using it. On signup, Firefox warns me that you'll share my email with Facebook. Do you know what's up with that? Is there any way to opt-out?

We use Facebook Pixel, and I think that message is related to it. I'm guessing that any ad block or strict privacy settings in Firefox should block this.

Love to see Bulma in the mix, it is my favorite CSS framework. Thanks!

I literally bought a license just now because you support Bulma

Are there any similar tools but for simple blogs? I find it very hard to design a simple but not dull blog layout because you don't have many pictures to show like a commercial website.

Hey, you can browse the full catalog of UI components available in our editor via this URL: https://shuffle.dev/components

Maybe you'll find designs for your next project!

Especially, check categories Blog and Content:

* https://shuffle.dev/components/all/all/blog

* https://shuffle.dev/components/all/all/content

Disruption by randomness!

That's what we said!

The idea is great, but I was surprised there's not a single "page template" that looks like a boring old wordpress blog, i.e. 2 column layout with maybe a header nav.

Hey, in the first release, we focus on general-purpose landing pages. We will develop this tool further. No worries! Also, in December, we are adding WordPress theme export to our editor. This will be a great time to update the configurator with "WordPress-like" templates :)

Alternate, more accurate title: Create cookie-cutter website layouts that look like every other bland landing page. Bonus points if they use Tailwind.

Believe it or not, not everything needs to be bleeding-edge creative and new.

I have personally found Shuffle to be a fantastic tool for personal projects, especially when I cannot or do not want to spend much time on design but want things to look halfway decent. That was half the appeal of frameworks like Bootstrap and I’m not really sure what value your comment adds, if anything (on a throwaway, to boot).

Too long

Congrats for launching - looking good.

One of the designs though needs some tweaking, i.e.

"Get perfect app for your project"

It's missing a 'the'... Get the perfect app...

Good eye! Thanks!

It would be great if you could A/B test combinations and tell me which layouts work better for services/content like mine

Hi, I haven't perfectly understood what can be exported, how would it integrate with Angular? Btw the designs seem very cool!

Hey, you can check exported examples in this ZIP archive: https://shuffle.dev/static/files/example.zip (the same link is available in the editor when exporting a demo project)

Cool project. I am sure that if you call it AI instead of random you will be able to charge more.

If we're ever looking for investors, we'll throw something about AI into the PowerPoint. ;)

It looks amazing, but how do I actually EDIT the contents of things in the editor?

You can edit the content by clicking on the desired item in the editor :)

Its called shuffle.dev because the website keeps pivoting too.

It's funny, but it's not true ;)

We keep adding new features, but the central point (the visual editor) is the same.

Today, you can start a new project:

* Classically, by opening the editor: https://shuffle.dev/editor

* From our components gallery: https://shuffle.dev/components

* From URL in this Show HN. Using our new project configurator: https://shuffle.dev/setup

The goal is to help our users choose the best UI library for their next project.

just a light joke :). I really like your stuff please don't get rid of any of it! Been a paying customer for months, mostly using the editor.

i bet $99 per year would sell more than $129 lifetime. nothing in the material is forever.

this is crazy good, I love it

this is awesome! can you not export to nextjs ?

Hey, we don't have a direct export to nextjs at this moment, but it is on our radar, of course :)

Why demo site is taking me to a paywall/create account in the next click? Couldn't you let us play without signing up? or am I missing another flow?

Hey, you can use the editor without creating an account: https://shuffle.dev/editor

Reply on news.ycombinator.com