Build a 3D Ecommerce Landing Page with Next.js 14, GSAP, Three.js and Prismic - Full Course 2024 Prismic 2024-09-04 | 🚀 Build a scroll animated 3D landing page with Next.js 14, GSAP, Prismic, Three.js, Tailwind, and TypeScript!In this creative and fun course, we will make an e-commerce product landing page to sell a fictional soda brand called Fizzi. You'll learn how to bring 3D models into your projects, and how to fully animate them for scroll effects and so much more. You’ll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder.You'll learn react-three-fiber to use Three.js within React. We’ll also use Tailwind CSS to style the super polished website, and Vercel to host it!We’ll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I’ll walk you through everything you need to know.At the end of this course you’ll have built and deployed a show stopping 3D experience that will impress job prospects or potential clients.---🔗 Course Resources: https://dub.sh/fizzi🔗 Figma project: https://fig.page/fizzi🔗 Final repository: github.com/a-trost/fizzi🔗 Live Site: https://fizzi-demo.vercel.app/---📍 Chapters:00:00 Welcome to the Fizzi Next.js course01:38 Website tour06:47 Setting up Next.js and Prismic14:42 Slice Machine 101 - Building the Hero01:05:16 Styling with Tailwind CSS01:29:54 Getting Started with GSAP01:37:25 GSAP Timeline01:47:19 GSAP Scroll Trigger01:58:54 Getting Started with Three.js02:14:06 Build a floating 3D soda can02:39:16 React Three Fiber02:47:37 Animating the can03:13:51 Adding bubbles03:21:59 Zustand and syncing animations03:31:01 Handling the mobile version03:35:28 3D performance03:36:58 Loading screen03:44:21 Diving can04:37:07 Carousel Slice05:16:43 Alternating text HTML & CSS05:25:21 Alternating text animation05:48:12 Big text Slice05:56:11 Footer06:01:39 Fixing details06:03:41 Deploy to GitHub and Vercel---As a developer, you should build websites using your favorite Jamstack framework.Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.---#nextjs #gsap #prismic
Migration Series: Converting HTML to Prismic Rich Text Prismic 2024-10-16 | In this sixth video of our migration series, we'll focus with Lucie on Prismic Rich Text fields. We'll learn how to convert HTML to Rich Text with flexibility and how images and links should be handled during the conversion process.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Rich Text 10100:00 Converting HTML to Rich Text00:00 Migrating images during conversion00:00 Migrating links during conversionDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Migrate from your existing CMS to Prismic in 4 steps Prismic 2024-10-16 | In this first video of our migration series, Lucie will present you what are the 4 recommended steps to follow to migrate successfully to Prismic.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📜 Learn more about content modeling with Prismic:prismic.io/docs/content-modeling📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Tools to migrate00:00 Creating a Prismic repository00:00 Initializing Slice Machine00:00 Modeling content00:00 Writing a migration scriptDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #migration #wordpress #drupal
Migration Series: Creating Documents Prismic 2024-10-16 | In this third video of our migration series, we'll focus with Lucie on document creation through our migration object. We'll see how to create migration documents of all sorts, including translated documents.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Creating documents00:00 Handling multi-language documentsDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Migration Series: Working With Content Relationships Prismic 2024-10-16 | In this fifth video of our migration series, we'll learn with Lucie how to link one document to another with content relationships and how complex use cases can be handled with the help lazy content relationships.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Content relationships 10100:00 Creating content relationships00:00 Creating lazy content relationshipsDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Migration Series: Writing a Migration Script Prismic 2024-10-16 | In this second video of our migration series, you'll learn with Lucie how to set up your migration script, how to run it, as well as scaffold the necessary Prismic utilities we'll learn how to work with in the following videos.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Script setup00:00 Prismic write client00:00 Migration object00:00 Dry run and next stepsDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Migration Series: Complete Example Script Overview Prismic 2024-10-16 | In this seventh video of our migration series, Lucie will walk you through a complete example script leveraging everything we've learned since the beginning of the migration series. We'll also run this script and migrate some content to Prismic for us to review and publish together.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Script walkthrough00:00 Running the migration script00:00 Migration result, review, and publicationDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Migration Series: Handling Assets Prismic 2024-10-16 | In this fourth video of our migration series, we'll learn with Lucie how to deal with assets with the migration object. We'll go over how to create assets of all sorts and how ot reference them in migration documents.🎞️ Check out the Migration Series playlist for more migration-related content:youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF📖 Browse the official documentation about migrating to Prismic:prismic.io/docs/migration📢 Considering a migration to Prismic? Reach out to us to learn more:prismic.io/enterprise---📍 Chapters: 00:00 Intro00:00 Assets 10100:00 Creating assets00:00 Referencing assets in documentsDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder #migration #wordpress #drupal
Copy and Paste your Slices & New Migration Client! - Prismic Chronicles Prismic 2024-10-02 | In this month’s edition of the Prismic Chronicles, Guy takes us through some exciting new updates! We’ve got a ton of improvements, starting with updates to the Page Builder, including a new document list, enhanced search, copy-paste functionality for slices, and image field enhancements.Plus, we’re super excited to announce a major update to our Migration API, which makes migrating your content to Prismic easier than ever!🔗 Check out the Migration API technical reference here: prismic.io/docs/migration-api-technical-reference🔗 No signup Page Builder demo:prismic.io/try---📍 Chapters: 00:00 Intro00:22 New Page list01:02 Copy & Paste a slice & New search06:07 Image field update07:06 New demo on prismic.io/try08:54 New Migration clientDon't forget to like, comment, and subscribe for more updates from Prismic!---#prismic #pagebuilder
3 Next.js Full Stack Projects to Build a Stunning Website Prismic 2024-09-27 | Follow the complete Next.js 14 courses, or clone them for your own websites 👇🔗 Next.js 3D Portfolio:youtu.be/rXDCAAkiC-sLaunch the Site:github.com/prismicio-community/course-creative-portfolio-next🔗 Next.js Dark SaaS:youtu.be/Cc37uTnbEosLaunch the Site:github.com/prismicio-community/course-glisten-next🔗 Next.js 3D E-commerce Landing Page:youtu.be/RKQqrNyAC6kLaunch the Site:github.com/prismicio-community/course-fizzi-next🥤 Feel free to use these Next.js templates for any of your personal or commercial projects; they are all yours!👇 Let us know in the comments below what you would like to see next. More GSAP? More Three.js? More flying soda cans?----As a developer, you should build websites using your favorite Jamstack framework.Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.---#nextjs #gsap #prismic
Build a 3D Ecommerce website with Next.js and GSAP! Prismic 2024-09-06 | Join the full course and start learning:youtu.be/RKQqrNyAC6k#nextjs #prismic
Creating your JavaScript framework? A full playbook with Rich Harris! Prismic 2024-08-16 | Have you ever thought about creating a JavaScript framework? Rich Harris offers advice on how to scope your project and design your APIs.🔗 Want to try Svelte 5 with Prismic, try this full tutorial, building your 3D portfolio with GSAP, SvelteKit and Prismic: youtu.be/JQAbenI2YTA---#javascript
All you need to know about Prismics Page Builder - Prismic Chronicle Prismic 2024-08-13 | For this summer edition of the Prismic Chronicle, we're walking you through a comprehensive demo on the Page Builder we've been working on over the past year.Including all the latest improvements : - A shiny media library- Live Preview- Tags- Bulk edit / delete- Translate with AI---✨ To get a beta access to the Translate with AI feature, please fill out the form:prismic.io/updates/localization-copilot🔗 Watch a live demo with Slice Machine in our latest Meetup:youtube.com/live/9rJItSEvtQk---📍 Chapters00:00 The Page Builder landing page01:28 Building the Hero Section03:05 Adding images / Media Library05:48 Benefits section (Accordion)08:10 Testimonial slice-- #prismic #pagebuilder
Kickstart websites in minutes with Nuxt UI and Prismic! Crash Course 2024 Prismic 2024-08-11 | 🚀 Build websites quickly with Nuxt UI, Tailwind, TypeScript, and Prismic!In this lightning course, we will build a landing page and set up the building blocks allowing content writers to extend our website freely. We'll learn how to get started with Nuxt UI, a UI library made specifically for Nuxt, a leading Vue.js framework. We'll also make all of our website's content editable by using Nuxt UI components in Prismic slices.Starting from the basics, this tutorial will set you on track to grow with Nuxt UI and Prismic. Step by step, we'll connect our website to Prismic, enabling great content edition and seamless previews when writing content.By the end of this lightning course, you'll have the core knowledge of Nuxt UI and Prismic for you to build great websites upon.🔗 Nuxt UI: ui.nuxt.com🔗 Icône JS: icones.js.org🔗 Prismic: prismic.io--#nuxt #prismic
Svelte 5 Runes - How to talk to the compiler ft Rich Harris Prismic 2024-08-09 | Svelte 5 introduces a new concept called Runes that basically allow you to use magical symbols that influence the Svelte compiler.We brought Rich Harris, the creator of Svelte, to the Prismic Studio to show us how you can use runes in your next Svelte project.🔗 Try Svelte & Prismic in a 3D Portfolio website project: youtu.be/JQAbenI2YTA🔗 Build a dark modern website with Sveltekit and GSAPyoutu.be/v5Ncz5AcXjI---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.---#svelte5 #runes
Svelte & Content - Whats Svelte’s creator take on your websites CMS? ft Rich Harris Prismic 2024-08-02 | How should you manage content in your Svelte application? Rich Harris explains Svelte’s philosophy on content management and offers advice for adding content to your web app.🔗 Try Prismic now with SvelteKit, building a full Portfolio website with GSAP and Tailwind:youtu.be/JQAbenI2YTA?si=Xmf-PwRLiaSunBVu🔗 Also featuring Rich Harris: youtu.be/fR6DFKq13J0?si=nbF3mlMHAbTOGBbi---#svelte #prismic
Live building slices with Next.js, now with even more flexibility! | Prismic Meetup Prismic 2024-08-01 | For this month’s Meetup, we’re bringing back one of our community’s favourite formats, a live coding session, to show you some of our latest releases in action. Join Sadek, CEO of Prismic and Alex Trost and Lucie Haberer from the Developer Experience team, as we take an existing website and improve it live by adding a new, Linear-inspired slice to it. We'll build on top of one of our most popular courses : youtu.be/Cc37uTnbEos __________ #prismic #meetup
React VS Svelte - Which one should you choose in 2024? ft Rich Harris Prismic 2024-07-26 | You’re starting a new web project and you’re hesitating between Svelte and React? We've got you covered! We brought Rich Harris, the creator of Svelte, to the Prismic studio to give you a full evaluation of those options.Spoiler: Rich knows more about React than you might imagine 🤯—🔗 Getting started with Sveltekit? Watch our latest full courses featuring Svelte / GSAP / Tailwind and Prismic:- youtu.be/v5Ncz5AcXjI- youtu.be/JQAbenI2YTA🔗 If you’re a React lover, get started with Next.js and Prismic:- youtu.be/rXDCAAkiC-s- youtu.be/Cc37uTnbEos#svelte #react
Shipping amazing experiences faster - ft. Guillermo Rauch, Next.js Creator & Vercel Founder Prismic 2024-07-22 | We sat down with @VercelHQ CEO, Guillermo Rauch for an unfiltered discussion about the future of hosting, JavaScript frameworks like Next.js, AI, and much more!Want to experience Next.js, Prismic, and Vercel in action? Join us for a masterclass with Alex Trost, where we'll be building:🔗 A 3D developer portfolio: youtu.be/rXDCAAkiC-s🔗 A dark modern website: youtu.be/Cc37uTnbEos---📍 Chapters00:00 Vercel fundraising in 2024 & Guillermo's vision08:14 Delivering value with AI?11:50 Dealing with competition18:50 Tech Challenges while building Prismic & Vercel26:10 Product-led growth 36:32 SaaS pricing and sales-driven companies41:00 Before & After GenAI58:30 The importance of brand voice and consistency 01:07:30 Shaping a simple vision of the future---#vercel #prismic #nextjs
Translate with AI and Next.js 15 / Svelte 5 support! - Prismic Chronicles Prismic 2024-07-05 | Are you looking to expand your websites to new markets? Then you will love our new beta feature in the Page Builder, allowing you to quickly get a translated version of your content, all powered by AI!Additionnaly, we’ve released full support of Next.js 15 RC and Svelte 5 RC in Slice Machine, try it out!🔗 Get access to Translate with AI beta: prismic.io/updates/localization-copilot🔗 Join the user survey and influence the Prismic roadmap: app.opinionx.co/a0e13671-b4ae-4acb-9ada-dc28d19edb51/intro📍00:00 Intro📍00:21 Media Library Recap (Tags)📍03:10 Translate with AI beta (Demo)📍05:48 Next.js 15 & Svelte 5---#prismic #ai
Build a Creative Portfolio with SvelteKit, GSAP and Prismic! Prismic 2024-07-04 | 🔴 Full Course: youtu.be/JQAbenI2YTA📄 Course guide on Notion: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386#sveltekit #gsap #prismic
Make more out of your Websites! | Prismic Meetup Prismic 2024-06-27 | Join us live for a live demo, a product roundup, and a live Q&A with the community 👇 Translate with AI ⇒ Get started fast in a new locale, live demo! Lightning round of Q2 ⇒ Organize and filter your media better with media library! ⇒ Slice Machine's new modeling capabilities. Grow with an agency partner Special guest: Sylvain Lourgouilloux, managing director at lab.co.uk, Prismic partner agency. Discover how agencies can leverage Slice Machine to reuse components and speed-up their development time by 40%! __________ As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a full SvelteKit website with Tailwind, GSAP and Prismic youtu.be/v5Ncz5AcXjI ► [Starters] Try Prismic with Sveltekit prismic.io/blog/sveltekit-prismic-integration --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Page Builder, for Next.js, Nuxt and SvelteKit developers. --- #prismic #meetup
Create a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024 Prismic 2024-06-24 | 🚀 Build your stunning creative portfolio website with SvelteKit, Prismic, Three.js, GSAP, Tailwind, and TypeScript!In this fun course, we'll make an interactive and stylish personal portfolio website to help you stand out. You'll learn SvelteKit, a JavaScript framework that makes performant sites and is a joy to work with. We'll use Three.js to create awesome 3D effects, and use a library called Threlte to make Three easy to use within Svelte. We'll dig into GSAP to animate our site on enter, scroll, and hover, and use Tailwind CSS for all the styling. We'll use Prismic for our content, which turns our custom components into a page builder with a ton of great features like live previews.Starting from the basics, this tutorial will show you how to create a website with Svelte and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!🔗 Course Resources: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386🔗 Final repository: github.com/a-trost/3d-sveltekit-tutorial🔗 Live Site: https://3d-sveltekit-tutorial.vercel.app/---Chapters 📍00:00 Intro00:49 Full Website Tour08:53 Setup your project (SvelteKit & Prismic)20:22 Building the Hero Section (Slice Machine & GSAP)02:06:26 Create background styles02:13:36 Settings and Footer02:54:23 Create the Header03:33:31 Biography section04:18:41 Animated Tech List section04:43:42 Experience section04:56:46 Blog section05:59:46 Professional projects category06:52:15 Deploy on Vercel07:03:30 Polishing the live website---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---#sveltekit #prismic #gsap
Advanced Slice Modeling & Team Spaces - Prismic Chronicles Prismic 2024-06-06 | We're happy to announce that we've just released Slice Machine 2.0.0 to natively support slices with sophisticated designs such as tabs, cards, multiple buttons, and image galleries.On the Page Builder side, a new powerful feature is coming soon: Team Spaces.It will allow you to define spaces for your team, allowing you, for instance, to permit Legal team members to only edit Legal pages.🔗 Get a demo of Team Spaces: prismic.io/updates/team-spaces🔗 Slice Machine 2.0.0 release on GitHub: github.com/prismicio/slice-machine/releasesChapters: 📍 00:00 Page Builder Recap📍 01:36 New Team Spaces📍 02:57 Slice Machine 2.0.0 Release---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---#prismic
Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! | Prismic Meetup Prismic 2024-05-30 | Svelte behind the scenes with its creator: Rich Harris Did you know that every month, more than 150 new projects are started with Prismic and SvelteKit? Want to learn more about both technologies? Join us to learn firsthand from my discussion with Rich Harris about the future of the web. We’ll dive into how using frameworks like Svelte can avoid over-complexity and improve developer experience.📍 Chapters:00:00 Intro05:22 Welcome to the Meetup06:29 Rich Harris & Svelte: How to build opensource16:10 Why we chose to integrate Svelte with Prismic22:20 What's new with Svelte 5 & Runes?33:05 Getting Started with Prismic & Svelte41:33 Live Q&A with Rich Harris46:49 Prismic Updates - Slice Machine 2.0 and Page Builder__________ As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a full SvelteKit website with Tailwind, GSAP and Prismic youtu.be/v5Ncz5AcXjI ► [Starters] Try Prismic with Sveltekit prismic.io/blog/sveltekit-prismic-integration --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Page Builder, for Next.js, Nuxt and SvelteKit developers. --- #sveltejs #sveltekit
Build a full Website with Sveltekit, GSAP and Prismic! Prismic 2024-05-07 | #sveltekit #gsap #prismic
An AI Copywriting Assistant in the Prismic Page Builder? | Prismic Meetup Prismic 2024-04-25 | We're considering adding an AI copywriting assistant to our Page Builder. Interested? Join our 30-minute Meetup this Wednesday to discuss this integration. It’s your chance to influence our decision-making process by sharing your thoughts directly with Prismic’s decision-makers: Guy, the Page Builder Product Manager, and Sadek, our CEO. Our guest, Abdul Shucker from Fineart (a Canadian agency using AI to speed up website delivery), will also share insights. __________ As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0 ► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters ► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters ► [Learn more about Slice Machine]: https://prismic.club/slice-machine --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Page Builder, for Next.js and Nuxt.js developers. --- #prismic #headlesscms #jasperai
New revision history & media library search. What about an AI copywriter? - Prismic Chronicles Prismic 2024-04-23 | This month, you will discover : 📍 00:00 Intro📍 00:11 AI copywriting copilot in the Page Builder?📍 05:07 Time-saving media library search📍 06:38 New revision history📍 07:47 HTML to Prismic MigrationCheckout all new product releases: prismic.io/updates---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---
Build an Animated Website with SvelteKit, GSAP & Prismic - Full Course 2024 Prismic 2024-04-12 | 🚀 Build a dark, modern, animated website with SvelteKit, GSAP, Prismic, Tailwind, and TypeScript!In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more! You'll learn how to use SvelteKit, the ultra fast Svelte metaframework. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website. We'll get bootstrapped with a minimal starter to set up SvelteKit and Prismic for us, and I'll walk you through everything you need to know. At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients, 🔗 Docs and Resources - https://prismic.notion.site/Course-Resources-Dark-Modern-Website-f1963068872c47ccad97820240e5b7e7🔗 Live Demo - https://repeat-ai.vercel.app/🔗 GitHub repo - github.com/a-trost/repeat-ai- - -📍 Chapters:00:00:00 - SvelteKit Full Course Intro00:01:41 - Project Overview with SvelteKit & Prismic00:09:45 - Notion Doc / Help and troubleshooting00:11:26 - Getting Started with Prismic00:14:25 - Getting started with VSCode00:18:42 - Homepage00:29:56 - Adding Tailwind CSS00:34:59 - Installing local font00:41:45 - Setting up footer01:07:03 - Tailwind CSS VSCode extension01:07:41 - Creating the Header01:54:00 - Styling the bento box02:20:40 - Showcase Section03:03:17 - Case Studies Slice04:00:47 - Integrations Slice04:29:50 - Call to action Slice04:37:00 - Assembling in the Page Builder04:57:40 - Deploying on Vercel05:10:45 - Animate the Hero with GSAP05:54:26 - Animate the Integrations section06:16:57 - Accessibility and Final Touch---#sveltekit #gsap #svelte #sveltekit #prismic
Efficient search in media library. Smart copy paste from Notion/Google Docs - Prismic Chronicles Prismic 2024-03-29 | This month, you will discover : 📍 00:00 Intro📍 00:16 Page Builder & Media Library Updates📍 03:10 Slice Machine Responsive UI📍 04:06 Migration API Bulk Updates📍 06:36 Smart Copy Paste with AI (from Notion or Google Docs)---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---
A new Media Library, AI Features in the Page Builder and 13 more features | Prismic Meetup Prismic 2024-03-28 | In the past three months at Prismic we released a new Media Library, a set of AI-based feature to supports marketers in creating content (Iterate with AI, Prompt to Slice) and thirteen improvements and bug fixes in Slice-Machine, including auto-save. Join us on Wednesday for our end-of-quarter roundtable as we go through these releases and give you a sneak-peak into the features landing in the coming three months: new documents search, smart copy paste from Notion or Google Docs to the Page Builder & team spaces in the Page Builder.📍 Chapters: 00:00 Welcome to the Meetup14:35 Migration API Updates26:55 Platform & API34:38 Page Builder & Media Library57:40 AI Features: Smart Copy Paste01:04:53 Slice Machine Updates & Priorities01:15:17 Live Q&A __________ As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0 ► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters ► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters ► [Learn more about Slice Machine]: https://prismic.club/slice-machine --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Page Builder, for Next.js and Nuxt.js developers. --- #prismic #headlesscms #nextjs
Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic! Prismic 2024-03-20 | Start building with Prismic and Next.js for free:prismic.io/nextjs
Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript Prismic 2024-03-15 | 🚀 Build a sleek and gorgeous animated website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript!In this fun course, we will make a trendy, dark, and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more! You'll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super polished website. We'll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I'll walk you through everything you need to know. At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients, 🔗 Docs and Resources - https://prismic.notion.site/Prismic-Next-js-Course-Resources-9eda931a8b3743b9b3aaf0b7a561403b?pvs=74🔗 Live Demo - https://glisten-ai.vercel.app/🔗 GitHub repo - github.com/a-trost/glisten-ai- - -📍 Chapters:00:00:00 - Intro - Marketing Website with Nextjs 1400:01:50 - Project Rundown00:08:21 - Create Next.js site with Prismic00:19:46 - Install Tailwind CSS00:25:20 - Add Font00:36:33 - VSCode Extensions for Next.js00:29:28 - Create Settings custom type00:37:08 - Creating Header and footer01:08:59 - Building the Hero Slice01:34:46 - Bento Box Slice02:02:59 - Showcase Slice02:33:21 - Case Studies Slice03:42:30 - Call to Action Slice04:04:44 - Deploy to Vercel04:09:42 - Revalidation04:13:24 - Add live preview URL (visual editing)04:17:22 - Hero Section Animation with GSAP05:09:51 - Integration Slice Animation05:23:02 - SEO Check and Polishing- - -#nextjs #tailwindcss #gsap
Iterate on your Slices with AI & new Media Library features! | Prismic Chronicles Prismic 2024-02-29 | For this February Prismic Chronicle, you'll discover :📍 00:00 Introduction📍 00:21 Iterate on Slices with AI📍 03:02 Media Library: New Search📍 04:20 Media Library: Bulk Delete📍 04:57 Media Library: New Tags📍 06:30 Slice Machine: Auto-save📍 07:27 Thank you!---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: bit.ly/3oiy6Rl► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---#prismic #ai #medialibrary
New Media Library - Find & Organize Assets Intuitively | Prismic Meetup Prismic 2024-02-29 | Discover Prismic's revamped Media Library in February 2024—now with better organization, tagging, filtering, and more. This upgrade will help you release pages faster, making assets easily accessible. Join our interactive Prismic Meetup to explore these new features with the Product team. We’ll cover the benefits, offer a live demo, and discuss future updates. Your feedback and questions are welcome, shaping Prismic's ongoing improvements.📍 00:00 Welcome to the Meetup!📍 03:44 Would you teach AI to your kids?📍 14:26 Ben Jackson from Paddle📍 30:42 What's new in Media Library? 📍 45:00 Live Q&A📍 58:10 Product Roadmap📍 01:06:52 See you next month! As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0 ► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters ► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters ► [Learn more about Slice Machine]: https://prismic.club/slice-machine --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers. --- #prismic #headlesscms #nextjs
How to Maintain an Open Source Framework | Inside Nuxt with Daniel Roe Prismic 2024-02-21 | How can open source truly stay open? What does it take to push an open-source framework forward?We spoke with @danielroe the Head of the Nuxt Core team to get his opinion on all this and more. Daniel shared insights into his professional journey, offering advice to aspiring professionals, and sheds light on future trends and his vision for the industry.Try Nuxt 3 with Prismic : prismic.io/docs/nuxt-3-setupFollow Daniel Roe on: YouTube: youtube.com/@danielroeTwitch: twitch.tv/danielroeTwitter / X: twitter.com/danielcroeChapters:📍 00:00 Intro📍 02:48 Start at Durham association 📍 08:47 Working remotely 📍 12:36 Becoming Nuxt Lead📍 15:35 Daniel's discovery of open-source📍 19:05 Nuxt 3 and Nuxt Bridge📍 23:15 Future of Nuxt in the community 📍 27:40 GitHub contibutions and quality📍 35:50 Workload as an open-source contributor 📍 41:36 Nuxt 4?📍 46:50 How do work magic into your planning?📍 48:35 AI and Large Language Models📍 57:44 Being a lazy developer📍 01:02:20 Nuxt module with Prismic📍 01:03:52 The Vue.js ecosystem---#nuxtjs #nuxt3
How to make a great framework better? - Svelte 5 with Rich Harris Prismic 2024-02-01 | We sat down for an interview with Rich Harris, the creator of Svelte and SvelteKit. In this video, Rich dives deep into the philosophy, features, and future of Svelte. Harris explains how Svelte simplifies web development, making it more accessible and improving app performance by compiling code at build time. He discusses the evolution of Svelte from its early days in newsrooms to the introduction of SvelteKit for full-stack development. We touch on what's new in SvelteKit 2, and what's coming with Svelte 5 and Runes. I ask him about every framework adopting signals, and he explains why they're such a great concept. Rich explains his thoughts on us overcomplicating web development, how some things should just be built in to the framework, and how we can make the web a better, more sustainable place. 📌 00:00:00 Intro📌 00:00:49 What problem does Svelte solve?📌 00:07:49 Writing the first line of Svelte📌 00:12:34 Creating tech for on-the-ground problems📌 00:14:58 Still newsroom DNA in Svelte?📌 00:20:09 What's so great about Signals?📌 00:26:20 What are Runes?📌 00:33:28 Svelte VS React VS Vue📌 00:37:10 Maintaining SvelteKit 📌 00:40:10 Svelte 5 Improvements 📌 00:47:54 SvelteKit 2 - Same but different?📌 00:53:30 Goals for SvelteKit & Svelte📌 00:59:38 Rollup📌 01:01:58 Joining Vercel📌 01:06:59 Why are the docs so good?📌 01:16:13 Creation of the Svelte name and logo---🔗 Try Sveltekit with Prismic nowprismic.io/docs/svelte-install---
New Page Builder and Migration API | Prismic Meetup Prismic 2024-02-01 | In January 2024, we launched two new features designed to accelerate your workflow. This month, we are introducing two major additions, now accessible to all existing and new users of Prismic repositories: the Visual Page Builder and the Migration API. Join us this Wednesday at the Prismic Meetup for a fireside chat with the Product team. You'll hear the backstory behind the development of these features and the team's future plans for the APIs and Page Builder. We also want to hear from you: let us know your priorities for future developments and how they could benefit you and your team. ---📍 Chapters: 00:00 Welcome to the Meetup04:40 Antoine Ughetto from Makemepulse - Partner Agency34:17 Migration API Live Demo51:39 Page Buidler Updates01:15:13 Prismic AI Features01:20:27 Live Q&A--- As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0 ► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters ► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters ► [Learn more about Slice Machine]: https://prismic.club/slice-machine --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers. --- #prismic #headlesscms #nextjs
A new Media Library for Prismic Page Builder! - Prismic Chronicles Prismic 2024-01-30 | For this first 2024 Prismic Chronicle, you will discover: 1️⃣ How to schedule a release on the Page Builder.2️⃣ A completely revamped Media Library, available now!3️⃣ Updates on the Migration API.4️⃣ How to change your master locale in a Prismic repository.🔗 Want to get access to the Migration API to migrate your existing content over to Prismic, get access to the beta: prismic.io/migrate🔗 If you want to enable the new Page Builder with the new Media Library on an existing repository, just ping us here: prismic.io/pb📍 Chapters:00:00 Intro00:30 Page Builder: Schedule a release04:00 Page Builder: New media library06:08 Migration API updates08:39 Change your master locale09:17 OutroSee you next month!---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---#prismic #pagebuilder
Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic Prismic 2023-12-28 | 🚀 Build your stunning portfolio site with Next.js, Three.js, GSAP, Tailwind, and TypeScript!In this fun course, we will make a stylish and interactive personal portfolio site that really stands out. You'll learn to use Next.js, a leading React framework, and Three.js (React Three Fiber) to add awesome 3D effects. We'll also dive into GSAP for smooth, fancy animations and use Tailwind CSS to make everything look neat and professional.Starting from the basics, this tutorial will show you how to create a website with Next.js and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!🔗Final repository: github.com/a-trost/creative-portfolio🔗Live Site: https://creative-portfolio-tutorial.vercel.app/---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine--📍 Chapters 00:00 Intro04:16 Getting Started - Project setup27:29 Creating the Hero32:12 Hero letters animation01:00:00 Helper Component01:06:29 Setting up Three.js Scene01:40:01 Adding sound effects01:45:08 Nav Bar02:03:03 About Page02:40:27 Tech List (Marquee Title)03:03:05 Hover and Scroll Animations04:47:15 Job Experience Slice04:51:37 Deployment on Vercel
Wrapping up 2023 - A year full of releases for Page Builder & Slice Machine! - Prismic Chronicles Prismic 2023-12-21 | 🎄 This year was full of releases, and we wanted to wrap it up for you!The Page Builder is now the default way of editing your pages on all new repositories! We'll show you an overview of the editing experience along with tips to schedule your releases and how to manage your legacy slices (if you're not using Slice Machine yet!) 🎁 Haven't tried the Page Builder yet: Try editing a page here. No signup required! prismic.io/trySlice Machine also had a lot of improvements this year with the added support of Sveltekit and the addition of new features like deleting and renaming your variations. We'll also give you a sneak peek of the features that will be shipped in 2024, like collaboration with the Github integration and team spaces.Finally, we'll show you how to migrate your content from another platform over to Prismic with a new limit, increased from 200 to 1000 documents.Chapters:📍 00:00 Intro📍 01:05 The new drag-and-drop Page Builder📍 05:48 Slice Machine supports Sveltekit, plus deleting and renaming slice variations📍 09:33 The new migration API supports large and multi-language websites📍 13:58 A sneak peek into 2024: Team Spaces, new Media Library and Search---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---
Visual Page Builder, New Search, Revamped Media Library... Come influence the trajectory of Prismic Prismic 2023-12-14 | Join us for our end-of-year roundtable, where we'll show our latest product releases, discuss features landing in the next three months (new Media Library, Search, Developer Sandbox) and dive into our pricing adjustments. This is your opportunity to sit at the table with us, share your thoughts, and help shape the future of Prismic. We look forward to this important dialogue with you. --- As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API. ► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0 ► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters ► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters ► [Learn more about Slice Machine]: https://prismic.club/slice-machine --- ► Find us also on: Twitter: twitter.com/prismicio Instagram: instagram.com/prismicio LinkedIn: linkedin.com/company/prismic-io ► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers. --- #prismic #headlesscms
The best NEW way to render Next.js pages Prismic 2023-12-03 | Full Next.js Course available here: youtu.be/nfZu56KsK_Q#nextjs
Should you use Server Actions with Next.js? Prismic 2023-12-01 | Full Next.js Course available here: youtu.be/nfZu56KsK_Q#nextjs
Migrate From Pages to App Router in Next.js 14 - Full Guide ft @hamedbahram Prismic 2023-11-30 | 🔥 Today, we've brought Hamed Bahram, successful software engineer and content creator to explain how to safely move from Pages to App Router in a Next.js 13 or 14 project.📍This full guide will cover the following chapters:0:00 Intro1:48 Project current setup11:30 Migrating to the App router13:50 Updating dependencies15:40 File conventions in App router19:20 Creating the App folder & root layout23:40 Migrating pages27:25 Routing hooks28:30 Migrating data fetching30:30 Prismic migration guide33:20 Migrating the Home page41:25 Migrating dynamic UID page44:10 Migrating API endpoints48:00 Recap🔗 Prismic's blog article on App Router & Prismic: prismic.io/blog/how-to-use-prismic-with-nextjs-app-routerProject repositories: 🔗 Starting Github Project: github.com/HamedBahram/prismic-next-migration🔗 Finished project on Github: github.com/HamedBahram/prismic-next-migrationFollowing up with Hamed's tutorials: Server vs. client components in the App router → youtu.be/3Dw6D_WuzSEData fetching in the App router (SSG, SSR, ISR) → youtu.be/OJ5GaNVujawThe new next/font package → youtu.be/D5oMzgy0h98---As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters► [Learn more about Slice Machine]: https://prismic.club/slice-machine---#nextjs #approuter
