New look, new docs, new website

Alvaro Saburido

Alvaro Saburido

@alvarosabu

Tino Koch

Tino Koch

@tinoooo

TresJS has grown a lot since we started in 2022, and tresjs.org has been the main entry point when you want to start you journey with 3D on Vue. It was time to give it a new look and feel that matches the current state of the library, modern and powerful, but same sprit as the beginning.

New design

We decided to refactor the website to Nuxt 4, and in an effort to have a consistent design language across the TresJS ecosystem, we are leveraging the incredible Nuxt UI library.

TresJS Docs

New docs website

TresJS Nuxt Devtools

TresJS Nuxt Devtools

TresJS Labs

New labs website

This is just a glance towards many improvements on the ecosystem

Same spirit

The brand is made to be minimalist and playful, we chosed Manrope for the headlines, Inter stayed as the main font and mono is now Geist Mono from Vercel, creating a lot of contrast between bold headers and body text.

Manrope

Inter

Geist Mono

We also incorporated some elements to make it feel like a technical blueprint, being Tres code: the schematics to bring those interactive experiences to life 🤓.

Discover the TresJS Design Kit.

New Docs

We also migrate our documentation from previous Vitepress to a tailored Nuxt 4 + Nuxt UI v4 customized Docs template. And we have to warn you, we were highly "inspired" (shamelessly copy 😜) by ideas from the Nuxt website.

Like the new navigation where you can easily jump between categories:

Or the other side (right), you can also navegate through each page's table of contents as well as community shortcuts.

Search command palette

You can now navigate faster by hitting K. We leverage the Nuxt UI <CommandPalette> components combined with Nuxt Content data (search & navigation) to provide a better search experience.

With the command palette, you can:

  • Jump to a page
  • Search in the documentation

Cookbook and community resources

We heard your feedback and we improved the format of the Cookbook recipes with step by step guides and we added a whole new page dedicated to Community resources, such as:

  • Community plugins and packages
  • Talks
  • TresJS courses
TresJS Cookbook recipes

Cookbook 🍳🧑‍🍳

TresJS Community resources

Community resources

If you want to showcase your own packages or resources, edit this page tresjs/tres/docs on Github.

What's next?

This new websites are just the beginning of upcoming changes we are planing for the ecosystem, some of them are:

  • New docs for @tresjs/cientos
  • New docs for @tresjs/postprocessing
  • Contributors page

We are looking forward to your feedback on Twitter, Discord or GitHub.

Big shoutout to the Nuxt UI team

We want to give a big shoutout to the Nuxt UI team for their incredible work on the library and for making all the pro components available for free. We are very grateful for their support and for the incredible library they have created.

Thank you for reading this blog post, and happy 3D ✌️