We are excited to announce big updates to the new Cosmic dashboard which are now available for testing. <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">Sign up for the alpha preview</a> to check out the new features and read about the updates below:<h3>Improvements</h3>1. Global navigation layout The global navigation has been moved to the top bar along with the search feature. This provides for easier access to core features and opens up the information architecture.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/cca344a0-ccbd-11ec-831d-dfdedfe3228f-dashboard-nav.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video>2. Updated Bucket organization Buckets organization has gone through an overhaul. We now include a secondary menu to make it possible to add lots of content types as well as media folders. Media folders now include emoji and edit capabilities.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/8b9f05b0-ccbe-11ec-831d-dfdedfe3228f-media.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video>3. Updated Projects One of the biggest changes in this release is the expansion of the Project as a higher level component in our service. Projects now include:<ul><li data-empty="true">Team members with main roles and granular Bucket permissions.</li><li>Billing plans. Payment management service available (Stripe test mode).</li></ul><video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/7aa8deb0-ccbf-11ec-831d-dfdedfe3228f-add-team.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video>4. User billing You can now add a payment method (Stripe test mode) to your user account which can be used on any billable resource. Invoices are also available for testing.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/9b335d50-ccbe-11ec-831d-dfdedfe3228f-add-payment-method.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video>5. Extensions Extensions have been improved with simpler organization and display editing.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/f5a8a4a0-ccc0-11ec-831d-dfdedfe3228f-extensions.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> <h3>Breaking Changes</h3>There is new logic for Project / Bucket roles and permissions. So any previously added test projects will need to be re-added. You can still import any Bucket from the old dashboard into the new dashboard by going to Bucket Settings &gt; Import / Export.<h3>Join the Alpha</h3>We are proud of the progress so far and excited for you to test out these new features as we continue to build the best content management solution in the world!If you haven&#39;t joined, <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">sign up to get on the waitlist</a> to preview the new dashboard including these new features.<h3>Get Some Swag 😎&nbsp;</h3>After joining the waitlist, share your personal link (found in the confirmation email) on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers.Stay tuned for more exciting updates! Follow us <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">on Twitter</a>, and join our team <a href="https://cosmicslack.herokuapp.com/" rel="noopener noreferrer" target="_blank">on Slack</a> to
get the latest on the new dashboard progress.Cosmic Team

New Dashboard Updates: Global Nav, Projects, Billing, and more!

We are excited to announce big updates to the new Cosmic dashboard. Newly available features include:1. Webhooks 2. Smart Views 3. Bulk Edit 4. Search &amp; ReplaceTL;DR <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">Sign up for the alpha preview</a> to check out the new features.<h3> Webhooks</h3>We are thrilled to unveil the new webhooks feature. You will notice that we have done a complete redesign of the logic, which will make adding webhooks (one of our most popular add-on features) much easier. Check out the details in the video below and
follow these steps:1. Create a new endpoint using a request intercepting tool like <a href="https://beeceptor.com/">Beeceptor</a>. 2. Go to Bucket Settings &gt; Webhooks and add the URL in a new webook. 3. Set your options for webhook trigger resource and event.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/3133cf40-953f-11ec-96f2-43bdd99faa64-add-webhook.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video>4. Next, update a resource to trigger the event. 5. Go back to Beeceptor to see the response data.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/010cbba0-9540-11ec-96f2-43bdd99faa64-trigger-webhook.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video><h3>Smart Views</h3>One of the most handy features in the Cosmic dashboard is our smart views, which makes it easy to save custom content filtering for easy access later. We think you will like the new approach to this feature which got even better with our new powerful <a href="https://www.cosmicjs.com/blog/new-dashboard-updates-search-and-filter" rel="noopener noreferrer" target="_blank">filtering capabilities</a>.Smart view developer tools And since we are focused on creating the best developer experience possible, in any smart view, you can open up the developer tools drawer and get access to the smart view example query code to add to any website or application. Great for those of us
that like a simple copy + paste 😉&nbsp;To check out the new smart views, follow these steps and watch the demo video:1. Go to the Objects table and set a filter on the top of the Objects table. 2. Click the create smart view button on the top of the Objects table. 3. Go to the dev tools drawer to get the dev tools query.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/9af3b070-9540-11ec-96f2-43bdd99faa64-smart-view-create.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video><h3>Bulk Edit</h3>Bulk editing content in the dashboard just got much simpler as well. Simply select the Objects to edit, include the fields that will be bulk edited, and make your changes.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/0128d9b0-9541-11ec-96f2-43bdd99faa64-bulk-edit.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video><h3>Search &amp; Replace</h3>Much like bulk editing, searching and replacing content across multiple content in the dashboard is a breeze.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/dae5d130-9541-11ec-96f2-43bdd99faa64-search-replace.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video><h3>Join the Alpha</h3>We are excited for you to test out these new features in the dashboard as we continue to build the best content management solution in the world.If you haven&#39;t joined, <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">sign up to get on the waitlist</a> to preview the new dashboard including these new features. It is our hope that we can enable your team with even greater flexibility and control over your Cosmic-powered content and hopefully get some feedback from you!<h3>Get Some Swag 😎&nbsp;</h3>After joining the waitlist, share your personal link in the confirmation email on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers.Stay tuned for more exciting updates! Follow us <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">on Twitter</a>, and join our team <a href="https://cosmicslack.herokuapp.com/" rel="noopener noreferrer" target="_blank">on Slack</a> to
get the latest on the new dashboard progress.The Cosmic Team

New Dashboard Updates: Webhooks, Smart Views, Bulk Edit, and more!

We have some exciting updates to share with you on the new Cosmic dashboard: global search and Object table filtering is now available!TL;DR <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">Sign up for the alpha preview</a> to check out the new features.<h3>Global Search</h3>You can now press <code>CMD+K</code> on any page (or click the link in the left hand sidebar for you mouse-click maximalists) and pull up a handy command pallet to search by Object, Object Type, or Media, as well as find quick links to helpful resources.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-action="zoom" data-video="https://cdn.cosmicjs.com/c66b09c0-844b-11ec-8e12-4f611a7927fa-global-single-theme.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/c66b09c0-844b-11ec-8e12-4f611a7927fa-global-single-theme.mp4">Your browser does not support HTML5 video.</video><h3> Objects Table Filtering</h3>One of features that sets Cosmic apart from other content solutions is our programmatic querying. Along with being very powerful in the API, this querying approach also comes in handy when you want to do content filtering and organization in the dashboard
(especially when saving smart views).We&#39;re happy to say that you can now use queries to do Object filtering from the table view with even more capabilities!How it works: click the filter button in the Objects table view and use the UI form builder to build your filtering logic. Filter by value matches, negative operators as well as use powerful numeric operators like greater than, less than, and more. And
you can even build your own code queries using the available &quot;Raw&quot; tab!Check out the docs for more information on how to do <a href="https://docs.cosmicjs.com/api-reference/queries#query-selectors" rel="noopener noreferrer" target="_blank">Cosmic Object querying</a> and follow these examples:Filter by specific Object Relationship like author or category (showing Single Object Metafield below)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://imgix.cosmicjs.com/6dd880e0-83b4-11ec-8e12-4f611a7927fa-filter-author.mp4" loop="" muted="" playsinline="" src="https://imgix.cosmicjs.com/6dd880e0-83b4-11ec-8e12-4f611a7927fa-filter-author.mp4">Your browser does not support HTML5 video.</video> Filter by string search in Object content (showing contains below)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://imgix.cosmicjs.com/ee0f6120-83b4-11ec-8e12-4f611a7927fa-filter-needle.mp4" loop="" muted="" playsinline="" src="https://imgix.cosmicjs.com/ee0f6120-83b4-11ec-8e12-4f611a7927fa-filter-needle.mp4">Your browser does not support HTML5 video.</video> Filter by tags (showing checkbox Metafield below)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://cdn.cosmicjs.com/94258990-83b5-11ec-8e12-4f611a7927fa-filter-tags.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/94258990-83b5-11ec-8e12-4f611a7927fa-filter-tags.mp4">Your browser does not support HTML5 video.</video> Filter by tags and numeric operators (showing less than or equal to below)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://cdn.cosmicjs.com/6c202d10-83b5-11ec-8e12-4f611a7927fa-filter-price.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/6c202d10-83b5-11ec-8e12-4f611a7927fa-filter-price.mp4">Your browser does not support HTML5 video.</video> <h3>Developer Tools Query Examples</h3>After setting your query in the table filter, you can grab the query from the Developer Tools drawer and plug it into your application (showing filtering Objects by Multiple Object Metafield below)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://cdn.cosmicjs.com/c9eb4100-83b5-11ec-8e12-4f611a7927fa-filter-get-query.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/c9eb4100-83b5-11ec-8e12-4f611a7927fa-filter-get-query.mp4">Your browser does not support HTML5 video.</video> <h3>Join the Alpha</h3>We are on a mission to build the best content management solution in the world. We are excited to offer you these new features during our alpha release of the new dashboard. If you haven&#39;t joined, <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">sign up to get on the waitlist</a> to preview the new dashboard including these new features. It is our hope that we can enable your team with even greater flexibility and control over your Cosmic-powered content and hopefully get some feedback from you!<h3>Get Some Swag 😎&nbsp;</h3>After joining the waitlist, share your personal link in the confirmation email on social media to be entered to receive free Cosmic swag including hoodies, tshirts, coffee mugs, and stickers (makes great Valentine&#39;s gifts for friends and significant
others!).Stay tuned for more exciting updates! Follow us <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">on Twitter</a>, and join our team <a href="https://cosmicslack.herokuapp.com/" rel="noopener noreferrer" target="_blank">on Slack</a> to get the latest on the new dashboard progress.The Cosmic Team

New Dashboard Updates: Search and Filter

2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here&#39;s a list of some of the things that we achieved over the past 12 months:<h2>2021 Highlights</h2>Merge Requests Earlier this year we released <a href="https://www.cosmicjs.com/blog/introducing-merge-requests" rel="noopener noreferrer" target="_blank">Merge Requests</a> to <a href="https://twitter.com/CosmicJS/status/1349046108526403586/retweets/with_comments" rel="noopener noreferrer" target="_blank">much fanfare</a>. Content development is a team sport and we believe Merge Requests is a game-changer. By enabling Git-like version control workflows, Merge Requests enables greater confidence and collaboration to help
teams increase content productivity.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout" data-video="https://cdn.cosmicjs.com/de4dc920-51f1-11eb-9dee-df51ce912356-add-merge-request.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/de4dc920-51f1-11eb-9dee-df51ce912356-add-merge-request.mp4">Your browser does not support HTML5 video.</video> New Documentation Every good development platform needs easy-to-follow and thorough documentation. We released <a href="https://docs.cosmicjs.com/" rel="noopener noreferrer" target="_blank">our new docs site</a> to provide a better experience when diving into the possibilities that Cosmic offers with our API tools and resources.<video autoplay="" class="card-shadow fr-draggable fr-fvc fr-dvi video-popout" data-video="https://cdn.cosmicjs.com/309d8980-6af3-11eb-afd3-010bb5d66a3e-Docs-v2.mp4" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/309d8980-6af3-11eb-afd3-010bb5d66a3e-Docs-v2.mp4">Your browser does not support HTML5 video.</video> New REST API v2 At Cosmic, we pride ourselves on providing the best API for content management. And it got even better this year with the <a href="https://www.cosmicjs.com/changelog/announcing-cosmic-rest-api-v2-new-docs" rel="noopener noreferrer" target="_blank">release of version 2 of our REST API</a>. We doubled down on the features that make our API the most straightforward API out there. Flexible queries, declarative API response properties, and millisecond response times make our API second to none. New Billing Organization We released an <a href="https://www.cosmicjs.com/changelog/account-billing-updates" rel="noopener noreferrer" target="_blank">update to billing details</a> that enables you to consolidate your billing for your user account (versus on each resource) which enables easier onboarding and accounting for paying customers. New CDN Usage Policies We are serving an ever-increasing amount of mission-critical content to billions of users globally. With this growth comes a responsibility to be clear whenever policies change that affect account management. We announced <a href="https://www.cosmicjs.com/changelog/usage-and-overage-policy-updates" rel="noopener noreferrer" target="_blank">new policies to our CDN usage and overages</a> to further assure customers that our service is pay-as-you-go and your billing scales with your usage fairly and transparently. New metrics were made available in the dashboard to enable users to monitor and predict any overages on plan usage.<img src="https://imgix.cosmicjs.com/fb967680-e4a9-11eb-aaa7-f94d35ca882e-1626270428681.jpg" data-name="1626270428681.jpg" style="width: 100%;" class="fr-fic fr-dib"> New Dashboard Finally, our biggest undertaking this year was the new Cosmic dashboard. We sent teasers and previews a <a href="https://www.cosmicjs.com/blog/sneak-peek-brand-new-dashboard" rel="noopener noreferrer" target="_blank">couple</a> of <a href="https://www.cosmicjs.com/blog/new-dashboard-progress" rel="noopener noreferrer" target="_blank">times</a>, ultimately releasing the new dashboard in <a href="https://www.cosmicjs.com/blog/new-dashboard-alpha-release" rel="noopener noreferrer" target="_blank">a private alpha</a>. It&#39;s now available for early access and we encourage you to <a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">sign up</a> to be a part of the next evolution of Cosmic!<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi video-popout" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/94b7de60-5469-11ec-88b1-5377807b2a13-alpha-preview.mp4">Your browser does not support HTML5 video.</video><h2>What&#39;s to come in 2022</h2>Cosmic is on a mission to be the best content management system in the world. Along with building a world-class product, we have assembled a world-class team to achieve our ambitious mission. I am extremely grateful for our amazing team and customers that have made this a stellar year for Cosmic. Cheers to a productive 2021 and looking forward to an exciting 2022! 🥂 Tony Spiro Cosmic CEO

Cosmic Year in Review

After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard! We have rebuilt the dashboard from the ground up and you can now be one of the first to test it in a private alpha release. See the preview below. <video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/94b7de60-5469-11ec-88b1-5377807b2a13-alpha-preview.mp4">Your browser does not support HTML5 video.</video>The new Cosmic Dashboard 😍To get started, go to the<a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">&nbsp;Cosmic Dashboard Alpha Landing Page</a> and add your email to join the waiting list. After joining, you can then share your special referral link with friends and colleagues to get bumped up the list!Once we let you in, there are some important things to keep in mind...The new dashboard is connected to a staging database You will be able to create new accounts and test the dashboard functionality, but you should not use this for any production website or apps. Though the data may be removed at any time, we will be sure to let you know if / when this happens so it&#39;s
not a surprise.Some features are not available yet We will be keeping a list in <a href="https://scratched-seeder-8a2.notion.site/Cosmic-Dashboard-v2-f5339511a8f24320966a2b483328b4d8" rel="noopener noreferrer" target="_blank">a Notion document</a> for you to learn about available features, limitations, and progress on the latest additions.You can import your Buckets from the old dashboard into the new one To make testing your current workflows straightforward, we have enabled the Import feature in the Bucket settings area. This way you can test your current Bucket use cases and provide us feedback on how it&#39;s working for you so we can make sure it&#39;s
going to be a smooth transition!We are excited to share with you the next evolution of Cosmic. The dashboard reflects the hard work and detail we put into making Cosmic the best content management solution in the world. We are grateful for your support, patience, and feedback as we continue to provide you with the best tools to collaborate around your content.The next step is to sign up on the<a href="https://app-v2.cosmicjs.com/" rel="noopener noreferrer" target="_blank">&nbsp;Cosmic Dashboard Alpha Landing Page</a>. After that, we will let you know when you&#39;re ready to get in. If you have any questions, please <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicslack.herokuapp.com/" rel="noopener noreferrer" target="_blank">join our community on Slack</a>.Thank you, The Cosmic Team

New Dashboard Alpha Release

We are excited to share more dashboard progress with you. Since <a href="https://www.cosmicjs.com/blog/sneak-peek-brand-new-dashboard" rel="noopener noreferrer" target="_blank">our last update</a> we&#39;ve been focused on building out the main Cosmic user flows for developers and content creators. Here&#39;s a sneak peak of some recently completed features:1. Add Project The onboarding process is simple and easy. Choose between starting with a template, or starting from scratch.<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/3d821600-2d28-11ec-a256-9f386f540f3a-dashboard-add-project.mp4">Your browser does not support HTML5 video.</video> 2. Add Object Type Creating your content model is easier than ever. Setting up localization is a breeze and we&#39;ve completely reimagined the Metafield model building process. You now have a drag and drop palette to create your Metafield models and sorting is easy too!<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/494c9460-2d28-11ec-a256-9f386f540f3a-dashboard-metafields.mp4">Your browser does not support HTML5 video.</video> 3. Adding Content Adding content to your Objects is now easier than ever. To relate Objects to one another, you now have an easy access search and select Object drawer.<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/c8b37a70-2d28-11ec-a256-9f386f540f3a-dashboard-single-object.mov">Your browser does not support HTML5 video.</video> 4. Developer Tools The new developer tools drawer makes accessing your code to implement into your app a snap.<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/c77aac50-2d28-11ec-a256-9f386f540f3a-dashboard-dev-tools.mp4">Your browser does not support HTML5 video.</video> We can&#39;t wait to show you more! We are on track to release the new dashboard in a private alpha soon. In the meantime, <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">join us on Twitter</a> and in <a href="https://www.cosmicjs.com/community">our Slack channel</a> to be the first to hear more about the latest updates.

New Dashboard Progress

We may have seemed a little quiet lately. That&#39;s because, for the last few months, we&#39;ve been hard at work building a completely new Cosmic dashboard!Built from the ground up, our new dashboard promises to be faster, easier to use, and more beautiful than any CMS dashboard you have ever seen.Though it&#39;s not quite ready yet, we are really excited to show you a sneak peek. Check out the screenshots below, and make sure to follow the links to be the first to get exclusive preview access before we release to the general public. Blazing Fast Page Loads ⚡ <video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/e44ad3e0-d829-11eb-a1a6-c3f080da6c53-fast-dash.mp4">Your browser does not support HTML5 video.</video> Beautiful Media Management 😍<video autoplay="" class="card-shadow video-popout fr-draggable fr-fvc fr-dvi" loop="" muted="" playsinline="" src="https://cdn.cosmicjs.com/a0a530f0-d5cb-11eb-9016-a7d86b9322db-media-upload.mp4">Your browser does not support HTML5 video.</video> Dark Mode 🌑 <img src="https://cdn.cosmicjs.com/cd5de6a0-d8dc-11eb-a1a6-c3f080da6c53-dark-mode.png" data-action="zoom" class="fr-fic fr-dii card-shadow image-popout"> And much, much more!!!At Cosmic, we are committed to providing your team with the best content management solution, and we think our new dashboard will make your experience second to none. Moar Previews Please! We can&#39;t wait to show you more when it&#39;s ready! If you&#39;re not onboard yet, <a href="https://app.cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">sign up</a> for Cosmic and we&#39;ll be sure to notify you when the new dashboard is available for you to get your hands on. Also, <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">follow us on Twitter</a> and <a href="https://cosmicslack.herokuapp.com/" rel="noopener noreferrer" target="_blank">join our Slack channel</a> for more updates.

Sneak Peek: Brand New Dashboard

<img src="https://imgix.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png?w=10&auto=format" data-image="https://imgix.cosmicjs.com/3c684a50-827e-11eb-8b5d-951d83ec2ae4-vue-vs-react.png?w=2000&auto=format" data-name="vue-vs-react.png" style="width: 100%;" class="fr-fic fr-dib lazy-load">JavaScript is, by far, the <a href="https://www.zdnet.com/article/programming-language-popularity-javascript-leads-5-million-new-developers-since-2017/">most popular programming language</a> in the world. However, that popularity becomes self-evident when you look at how many libraries and frameworks are built on top of JavaScript.<a href="https://vuejs.org/">Vue</a> and <a href="https://reactjs.org/">React</a> are among the most <a href="https://insights.stackoverflow.com/survey/2020#technology-web-frameworks" rel="noopener noreferrer" target="_blank">popular web frameworks</a>(React
is 2nd only to jQuery, Vue has risen steadily to the #7 spot). Neither of them appears to be slowing down anytime soon &ndash; both gained usage share over the last 3 years.The distinction that we make between libraries and frameworks is essential to understanding the differences between Vue and React. Although they&#39;re both built on top of JavaScript, they have different use cases.In this article, we&#39;ll talk about what Vue and React bring to the table to help you decide which framework/library you should use.<h2>What Is React?</h2><a href="https://reactjs.org/">React</a> (also known as React.js or ReactJS) is a JavaScript library developed by Facebook. It was <a href="https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/">released in 2013</a> and, since then, it&#39;s grown into one of the most popular libraries in the world. If you go by GitHub numbers alone, <a href="https://github.com/facebook/react">over 5.8 million developers</a> have projects that use React.With React, you can build user interfaces using declarative views and encapsulated components. React also took the existing concept of the virtual DOM and made it much more popular in development. Using React virtual DOMs, every time that you render a JSX element (the syntax that React uses) the library detects what objects it needs to update and updates only&nbsp;those resources in the real DOM.Technicalities aside, it&#39;s also important to mention that Vue and React are very different when it comes to core philosophies. React is still maintained and funded by Facebook, but it operates under the MIT license, making it an open-source project.<h2>What Is Vue?</h2><a href="https://vuejs.org/">Vue</a> is, in many ways, similar to React. It&#39;s an open-source framework designed to help developers build intricate User Interfaces (UI). However, it&#39;s the somewhat newer project, launching in 2014. Vue is <a href="https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/">the thought-child of Evan You</a>,
a developer who&#39;s still working on the project, albeit with a larger team now thanks to crowdfunding and corporate sponsors.Despite the evident difference between resources for both projects, Vue has gained steadily in market share and popularity throughout the past few years.&nbsp;As far as technicalities go, Vue uses the same virtual DOM approach as React. It&#39;s also a component-based framework that focuses on the view library. That means it somewhat depends on other libraries for routing and management.<h2>4 Key Differences Between Vue and React</h2>So far, you know what makes Vue and React so similar (and popular). Let&#39;s talk about the main differences between them.<h3>1. Templating</h3>Perhaps the most evident difference between React and Vue lies in the way that each project handles templates.&nbsp;React uses a JavaScript syntax extension called JSX for everything. It&#39;s possible to use React without JSX, allowing you to skip compiles by using plan Javascript, but for all intents and purposes, many of the benefits of React are built
into JSX.Using JSX means that both HTML and CSS are wrapped up in JavaScript. In practice, using JSX, you can use the same code to generate both UI components and dictate their behavior.&nbsp;JSX can be as versatile as a full language, including flow controls and temporary variables. Plus, it supports all the Integrated Development Environment (IDE) features you&#39;d expect, such as autocomplete, linting, and type checking.Vue, on the other hand, uses distinct blocks for HTML, CSS, and JavaScript. This makes picking up the framework more simple, even if you&#39;re relatively new to JavaScript. Vue is a common first framework for developers.Vue&#39;s &#39;modular&#39; approach also makes it easy to migrate projects to the framework, since you can add functionality gradually to existing documents.What&#39;s more, <a href="https://vuejs.org/v2/guide/render-function.html">Vue also supports JSX</a>, making it far more versatile than it looks at first glance. Even so, the framework is primarily designed to work with HTML-based templates,
and Vue&#39;s own docs recommend against JSX for most cases.&nbsp;In our experience, many developers feel that JSX is the more comprehensive and powerful option. However, Vue is definitely easier to work with, especially if not everyone on your team is familiar with the framework.<h3>2. Ecosystem</h3>It would be fair to say that Vue is more of a standalone solution than React. Using Vue, you get access to a smaller number of companion libraries simply, because we&#39;re dealing with a framework that&#39;s not as popular as React. However, you also
need external libraries less often, because most of the functionality you need already exists within the framework.Some of the most important Vue libraries, such as <a href="https://router.vuejs.org/">vue-router</a>, are supported by the frameworks&#39; own core team.React, on the other hand, offers you a staggering number of libraries. In most cases, you&#39;ll need to use them since React relies on third-party solutions for state management and routing.Some of those critical libraries, such as <a href="https://redux.js.org/">react-redux</a> and <a href="https://reactrouter.com/">react-router</a> are maintained by the community, unlike React core, but are still highly reliable.<h3>3. Scalability</h3>Both Vue and React are lightweight solutions, and they&#39;re pretty much on par when it comes to performance out of the box. However, as your web applications start to grow, some cracks begin to emerge.Vue&#39;s HTML template approach may be simpler to adopt, but it can also be a handicap for large projects. Simply put, dealing with HTML templates over and over is not as efficient as using JSX.React&#39;s institutional support and popularity also gives it an edge when it comes to scalability. It&#39;s hard to compete with the vast number of libraries available to customize your projects. Combine that with JSX and you have a library that&#39;s
perfect for enterprise-grade projects.<h3>4. Cross-Platform Development</h3>If you&#39;re interested in cross-platform development, React wins the battle hands down thanks to <a href="https://reactnative.dev/">React Native</a> alone. With React Native, you can re-use vast portions of your code between mobile and desktop operating systems, all using React components.Vue also offers several options for mobile development, but the selection isn&#39;t as clear cut as with React Native. Some of the most popular Vue options include <a href="https://quasar.dev/">Quasar</a>, <a href="https://madewithvuejs.com/vux">Vux</a>, and <a href="https://mint-ui.github.io/">Mint-UI</a>.In our experience, mobile development with React is generally easier, although Vue isn&#39;t lagging that far behind in terms of functionality. React Native&#39;s sheer popularity makes it the best choice due to its native functionality, documentation,
and third-party solutions.<h2>How Vue and React Work with Headless CMS Solutions</h2>Of course, many solutions built with either React or Vue combine with a headless Content Management System (CMS) solution for content management and increased application accessibility.Although Vue does offer a more all-in-one solution than React, both can benefit from all the features a headless CMS brings to the table. Using a headless CMS, you can rely on React or Vue for your web application&#39;s front end (the head) and let the
CMS handle everything else, including:<ul><li>Providing a dashboard you and your team can use.&nbsp;Although you may be comfortable dealing with the backend directly, a lot of your team might prefer to use an intuitive dashboard to interact with and update your application content.</li><li>Access to rich text and media editing tools.&nbsp;Text and media are at the core of every web project and having access to a powerful editor will make your life much easier when it comes to publishing and updating your site.</li><li>User role and permission systems.&nbsp;Not every user needs the same level of permissions when it comes to updating applications. With the right CMS, you can govern these settings with a user-friendly interface.&nbsp;</li><li>Backup functionality.&nbsp;Instead of worrying about backing up your data, you can let a CMS do it for you.</li></ul>Which headless CMS solution you decide to use comes down to feature sets and needs. Cosmic is proudly the most flexible headless CMS available in 2021&#39;s market. With Cosmic you get access to both a REST and a GraphQL API to sync data to buckets. And our <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">NPM module</a> is a great fit for any React or Vue application.Cosmic makes it easy to learn and launch React and Vue projects in a matter of minutes. You can <a href="https://docs.cosmicjs.com/guides/#react">deploy a React app</a> with only a handful of commands, and <a href="https://docs.cosmicjs.com/guides/#vue-js">the same goes for Vue</a>. See the docs for helpful guides to get started with <a href="https://docs-v2.cosmicjs.com/guides/react" rel="noopener noreferrer" target="_blank">React</a> or <a href="https://docs-v2.cosmicjs.com/guides/vuejs" rel="noopener noreferrer" target="_blank">Vue.js</a>.<h2>When to Use Vue vs React and Vice Versa</h2>Due to Vue and React&#39;s different core philosophies, there are fairly clear best-use scenarios for each solution. To sum them up:<ul><li>React.&nbsp;This library is the better option if you&#39;re working on an enterprise-level project or you want to pick the solution that has the most options when it comes to third-party contributions. Most importantly, React&#39;s basis
on JSX can make it a much more scalable option versus Vue&#39;s HTML templating.</li><li>Vue.&nbsp;We recommend that you use Vue if you want a framework that makes migrating projects as easy as possible. Vue is also the superior option if you want a framework that makes collaboration simpler, precisely thanks to its HTML
templating approach. Overall, it&#39;s more beginner-friendly.</li></ul>Ultimately, which solution you opt for should depend on your team and each project that you tackle. In any case, both React and Vue are fantastic options to work with.Are you ready to start using React and Vue alongside a headless CMS solution?&nbsp;<a href="https://www.cosmicjs.com/pricing">Start Managing an Application with Cosmic for free</a>&nbsp;right now.

Vue vs React: Which Is The Best Option in 2021?

<img src="https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png?w=10&auto=fomat" data-image="https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png?w=2000&auto=fomat" data-name="gatsby-vs-next.png" style="width: 100%;" class="fr-fic fr-dib lazy-load">Creating websites and developing web applications is arguably easier than ever thanks to the broad number of open-source frameworks at your disposal. Whether you&rsquo;re developing a simple static website or an e-commerce platform designed to scale, you have plenty of framework options, including <a href="https://www.gatsbyjs.com/">Gatsby</a> and <a href="https://nextjs.org/">Next.js</a>.Using web frameworks, you can develop viable websites much more efficiently than if you started from scratch. Moreover, by combining frameworks with a <a href="https://www.cosmicjs.com/blog/headless-cms-the-foundation-for-modern-digital-experiences">headless Content Management System (CMS)</a>,
you get the best of both worlds. That is to say, a system that enables you to create and manage content at scale with a small performance footprint, alongside all the tools you need to create user-friendly website for users to interact with.As powerful a combination as that is, you can&rsquo;t go ahead and use any framework alongside any headless CMS. Fortunately, both Gatsby and Next.js happen to be fantastic options to use alongside a headless CMS (<a href="https://www.cosmicjs.com/">such as Cosmic</a>).In this article, we&rsquo;re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We&rsquo;ll talk about how they handle data and render static websites. Then we&rsquo;ll go over headless CMS integration
for both frameworks. That way, you&rsquo;ll have all the information you need to make an informed decision.<h2>An Introduction to Gatsby and Next.js</h2>Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. Some of the most popular websites in the world use Next.js, <a href="https://nextjs.org/showcase">including Twitch, Hulu, and Nike</a>. Gatsby doesn&rsquo;t
fall far behind, though, with plenty of household names attached to the framework, including IBM and PayPal.It would be easy to say that both frameworks are so popular because they&rsquo;re based on React. Since its launch in 2011, React has become one of the web&rsquo;s most loved frameworks. That&rsquo;s not an exaggeration either, it actually beat out <a href="https://vuejs.org/">Vue.js</a> in an internal <a href="https://insights.stackoverflow.com/survey/2019">Stack Overflow survey in 2019</a> that asked developers what their favorite framework was.Despite the fact that both Next.js and Gatsby share roots, they&rsquo;re very different frameworks with unique applications. In a nutshell, Gatsby combines React and GraphQL to provide you with a user-friendly tools that you can use for <a href="https://www.cosmicjs.com/blog/static-site-generators-explained-in-5-minutes">static website generation</a>.Next.js, on the other hand, generates HTML dynamically whenever your server gets a new request. That has an impact on website performance, but it&rsquo;s also necessary for dynamic websites. If your website has users, includes comments, or you sell products
online, static pages simply won&rsquo;t cut it.<h2>Gatsby vs Next.js: Which Framework Is Best for Static Content Generation?</h2>Now more than ever, we understand that site performance is critical when it comes to providing the best possible user experience. As much time and effort as you spend into optimizing your setup, dynamic websites, by design, can&rsquo;t match the sheer
speed of static pages.If&nbsp;you&rsquo;re working a website where you know you won&rsquo;t need to update pages often or use dynamic elements, a framework such as Gatsby is your best bet. Using Gatsby, you only load critical HTML, JavaScript, and CSS, which makes
it a steamroller when it comes to performance.The primary difference between Gatsby and Next.js is that the former generates HTML content on the client-side. That means if you use Gatsby to build your web application, your server doesn&rsquo;t need to render anything when it gets a request &ndash;
it all happens during build or runtime time.&nbsp;Next.js isn&rsquo;t necessarily a worse choice from a performance standpoint. However, the way the framework works (pardon the pun) means that whenever someone attempts to visit your website, your server generates the page that they&rsquo;ll see dynamically.It&rsquo;s important to note that during recent updates, Next.js has made a lot of strides when it comes to static content generation. Next.js 9.3 introduced support for static side generation, which means the framework now also support build-time rendering.&nbsp;That makes Next.js a great option both for dynamic and static websites. However, Gatsby still has an edge when it comes to the latter since it&rsquo;s baked into its DNA.<h2>Gatsby vs Next.js: How Each Framework Tackles Data Handling</h2>Gatsby has a structural advantage over Next.js as far as data security goes. However, that&rsquo;s because the framework doesn&rsquo;t fetch data from your server or a database. By their nature, static content generators are more secure, but that means
your options are limited if you need dynamic data handling.&nbsp;For example, if you want to enable user registration, commenting, dynamic elements, and more, then you need to expand Gatsby&rsquo;s functionality. Fortunately, that&rsquo;s possible. The framework offers a lot of plugins that enable you to connect with
CMSs such as WordPress and it also works with headless options (which we&rsquo;ll discuss in a minute).One data-handling aspect where Gatsby does shine is when it comes to images. The framework comes with massive library of plugins that you can use to extend its functionality. For example, <a href="https://www.gatsbyjs.com/plugins/gatsby-image/">Gatsby-images</a>enables
you to resize the images your visitors see at build time, which translates to faster loading times without it impacting server usage. Plus, it also includes lazy-loading functionality.To put it another way, serving a static website doesn&rsquo;t mean that your pages will look boring. As we mentioned before, plenty of household-name companies use Gatsby, and if you check out their websites, you&rsquo;ll see they&rsquo;re far from being drab.Next.js, on the other hand, is capable of data handling. However, just like with Gatsby, you need to set up a backend solution that can actually manage the data and content Next.js uses to generate pages dynamically.<h2>Why Use Gatsby or Next.js With a Headless CMS</h2>The concept of a headless CMS is simple. You take what is arguably the best part of a CMS, which is content management and generation, and use that as the backend for your web projects. That frees you up to use any approach that you want when it comes
to the frontend, which includes using React frameworks such as Gatsby and Next.js.So far, we&rsquo;ve gone over a lot of the upsides and downsides of using Next.js and Gatsby. Using the right headless CMS, you can make up for a lot of either framework&rsquo;s downsides. Let&rsquo;s break down how:<ul><li>Content creation and management.&nbsp;With the right CMS, you get powerful features that enable you to create, edit, and publish content more efficiently. You use your preferred framework for rendering, but get access to a user-friendly
CMS for everything else.</li><li>Data handling.&nbsp;CMSs provide data-handling solutions for both Gatsby and Next.js.&nbsp;</li><li>Scalability.&nbsp;Instead of generating and maintaining each page manually from the ground up, a CMS provides you with tools to ensure that you can manage data efficiently.</li></ul>The whole point of using a headless CMS in combination with a React framework is to provide you with a flexible setup that adapts to whichever type of project you intend to develop. With the right headless CMS, you can launch any type of website, from
a simple blog to an online store, and use your preferred React framework to power its frontend.&nbsp;There are plenty of options when it comes to headless CMS integrations for both Gatsby and Next.js. However, Cosmic provides built-in support and functionality for both frameworks.If you want to use Next.js, you can <a href="https://docs.cosmicjs.com/guides/#next-js">create a Next.js app</a> and install the Cosmic NPM module in a matter of minutes. Launching a project that combines Cosmic with Gatsby is equally as simple, since there&rsquo;s a <a href="https://www.npmjs.com/package/gatsby-source-cosmicjs">Cosmic source plugin</a> for the framework.With Cosmic, you get a cloud headless solution that works with most popular frameworks. The headless CMS provides both a GraphQL and a REST API, which makes it an incredibly versatile solution.<h2>When to Use Gatsby vs Next.js (And Vice Versa)</h2>Although both Gatsby and Next.js are fantastic framework options to use alongside a headless CMS, they&rsquo;re not interchangeable solutions. Let&rsquo;s go over which framework you should use depending on the type of project that you&rsquo;re working on:<ol><li>Gatsby.&nbsp;This framework&rsquo;s strength lies in its unmatched static site generating performance. Although using a headless CMS can make up for a lot of features that it doesn&rsquo;t offer out of the box, Gatsby is perhaps not the
best option for client-side applications or websites that require massive amounts of dynamic content.</li><li>Next.js.&nbsp;If you&rsquo;re working on a project that&rsquo;s about as far as you can get from static, Next.js definitely has an advantage over Gatsby. When you combine its features with a headless CMS, you get a stack that&rsquo;s
about as flexible as it gets.</li></ol>Overall, which framework to use comes down to the type of project you&rsquo;re working on. If you use Cosmic, though, you can easily switch between frameworks for each new project and still get to use the same backend.If you&rsquo;re ready to check out what a headless CMS platform can enable you to do, try out Cosmic. We offer a&nbsp;<a href="https://www.cosmicjs.com/pricing">free Personal plan</a>&nbsp;that use can use to check out the platform.

Start building today