DEV3 Technologies home

Free code snippets

Free code snippets, page 3

Small, self-contained patterns from real DEV3 products, each explained, with a live preview where it makes sense. Copy them into your project; commercial use is fine.
200
snippets
7
stacks

All snippets

React / Next.js · HooksSafe localStorage state hookA hydration-safe React hook that persists state in localStorage, survives blocked storage and syncs across browser tabs.reactlocalstoragehook React / Next.js · HooksUndo and redo history hookA reducer-based React hook that adds undo, redo, a history limit and coalesced updates to any piece of state.reactundo-redohistory React / Next.js · HooksDrag-and-drop file hookA small React hook that turns any element into a file drop zone with an accept filter and a stable dragging flag.reactdrag-dropfiles React / Next.js · HooksDrift-free countdown timer hookA React hook that counts down to a deadline using timestamps so it stays accurate through throttled tabs and pauses.reacttimercountdown React / Next.js · FormsSignature pad canvas componentA sharp, touch-friendly React signature pad using pointer events and smoothed curves, with clear and PNG export.reactcanvassignature React / Next.js · UtilitiesSandboxed iframe code playgroundA React HTML, CSS and JavaScript playground that runs user code in a sandboxed iframe with a debounced srcDoc update.reactiframesandbox React / Next.js · LayoutsPrint stylesheet for a resume pageA small React resume component with print CSS that sets A4 page margins, hides controls and avoids awkward page breaks.printcssresume React / Next.js · UtilitiesQR code component rendered as SVGA server-safe React component that turns text into a crisp QR code SVG with a quiet zone, colours and error correction.reactqr-codesvg React / Next.js · FormsMarkdown editor with live previewA two-pane React Markdown editor whose tiny escape-first renderer is safe against HTML injection and needs no packages.markdowneditorreact React / Next.js · FormsLine-items editor with live totalsA reducer-driven React table for adding, editing and removing line items with tax and total maths done in integer cents.reactformsinvoice React / Next.js · CardsKanban board with native drag and dropA library-free React kanban board using HTML5 drag events and a pure moveCard function to reorder across columns.reactkanbandrag-drop React / Next.js · UtilitiesCollapsible JSON tree viewerA recursive React component that renders any JSON value as an expandable tree with typed colours and item counts.reactjsontree React / Next.js · ChartsGantt bars from task datesConvert task start and end dates into percentage-based timeline bars with week gridlines in a small React component.gantttimelinedates React / Next.js · Feedback and empty statesCopy button with toast hookA React hook and button that copy text with a clipboard fallback and show a self-dismissing confirmation toast.reactclipboardtoast React / Next.js · HooksPan and zoom surface hookA React hook that adds wheel zoom around the cursor, drag panning and a CSS transform to any large canvas or diagram.reactpanzoom Laravel · Queue jobsQueued click tracking with user-agent filterRedirect instantly and record the click in a queued job, flagging crawlers by user agent so they never inflate your counts.analyticsqueueredirect Laravel · UtilitiesQR code with a centre logoRender a high error-correction SVG QR code and overlay a rounded logo plate in the middle, with no image extension required.qrsvglogo Tailwind CSS · CardsProduct gallery with thumbnailsA product image gallery with a large view, a thumbnail strip, arrow key navigation and an accessible selected state.gallerythumbnailsproduct Tailwind CSS · CardsProduct card with quick addA product card with an image, price, rating and an add-to-cart button that reveals on hover and always shows on touch.productcardecommerce WordPress · PricingMonthly / yearly pricing toggle shortcodeA pricing table shortcode with an accessible monthly and yearly switch driven by data attributes and a few lines of script.pricingshortcodetoggle Tailwind CSS · PricingPricing table with monthly and yearly toggleA 3 plan pricing grid whose prices swap between monthly and yearly billing through one accessible switch.pricingtogglesaas WordPress · SEOPodcastEpisode structured dataOutput valid PodcastEpisode JSON-LD in the head of single episode pages, built from post data and safely encoded.json-ldschema-orgpodcast Laravel · MiddlewarePlan-limit gate middlewareRoute middleware that blocks a request when the team has used up its plan allowance for a named limit, with a clear upgrade response.planslimitsmiddleware Tailwind CSS · PricingPlan comparison matrixAn accessible pricing comparison table with grouped feature rows, a highlighted plan column and horizontal scroll on small screens.pricingtablecomparison