# Divhunt

> Divhunt is a web development platform that helps

## Rest API

**URL:** https://dev.divhunt.com/features/rest-api

This page introduces a platform for connecting any CMS using visual REST API integrations. It enables users to easily fetch, cache, and display data from their favorite CMS, transforming it into a headless setup with a visual builder. The platform offers a comprehensive solution for launching powerful websites on top of any headless CMS, featuring dynamic parameters and single pages for limitless possibilities. It also emphasizes native integrations to simplify the connection process. Users are invited to build for free and watch a tutorial.

## Localization

**URL:** https://dev.divhunt.com/features/localization

This page introduces Divhunt's free website localization tools, enabling users to translate their websites into up to 15 languages to reach global audiences. It highlights features for translating pages, CMS content, URLs, and metadata. Key capabilities include a modular and flexible CMS localization system that allows managing different embed codes per language. The platform also outlines upcoming features such as AI-powered translation for instant content optimization and localized SEO tools to optimize websites for global search.

## Introducing Divhunt Prerender V2

**URL:** https://dev.divhunt.com/updates/introducing-divhunt-prerender-v2

Name: Introducing Divhunt Prerender V2
Created: 2024-11-05 13:25:12.532097+00
Content: Exciting news! Divhunt Prerender V2 is now up & running! Faster, with multi-regional support, and free for all Divhunt users. This update means your website will see improved SEO performance. We now deliver clean, full HTML of your website to Google, other search engines, and popular tools like Ahrefs in a matter of miliseconds worldwide. We're also developing an advanced analytics dashboard for Prerender. Soon, you'll be able to monitor crawl requests from bots like Google, Yahoo, see how quickly we serve HTML to them, view your pages as they're crawled, analyze sent content, check page metrics, and much more. If you have any issues or suggestions, please let us know. Weu2019re here to make Divhunt better for you. If you encounter any SEO tool that Divhunt Prerender doesn't currently support, please reach out to us. We're committed on improving Prerender and adding support for new tool.
Description: Divhunt Prerender V2: faster, multi-regional support, free for all users, improving SEO performance.
Category: Feature
Date: 2024-05-08 12:11:00
Created: 2024-11-05 13:25:12.532097+00

## Dashboard update: Monitor activity and performance

**URL:** https://dev.divhunt.com/updates/dashboard-update-monitor-activity-and-performance

Name: Dashboard update: Monitor activity and performance
Created: 2024-11-05 13:25:12.532097+00
Content: We just made our dashboard better. Now, you can see what admins and users are doing, check how busy the website is, and how quickly it responds to requests. Consider this an Alpha version of the Dashboard, as we have big plans for the future, where you will have much more to monitor, all in one place.
Description: This update introduces monitoring capabilities to the dashboard. Track admin and user activities, website traffic, and response times efficiently.
Tag: Dashboard
Category: Feature
Date: 2024-03-14 15:56:00
Created: 2024-11-05 13:25:12.532097+00

## Carousel Slider - Add One to Any Website in Minutes

**URL:** https://dev.divhunt.com/blog/carousel-slider

Add a touch-enabled carousel slider to any website with one script tag. Navigation, pagination, autoplay, 6 effects. Works on Webflow, WordPress, Shopify.
Name: Carousel Slider - Add One to Any Website in Minutes
Created: 2026-03-03 21:03:50.531532+00
Description: Add a responsive carousel slider to any website with a single script tag and HTML attributes. Touch-enabled, multiple effects, works everywhere.
Content: Building a carousel slider from scratch means pulling in a library, configuring options in JavaScript, writing CSS for navigation and pagination, and debugging touch events on mobile. Most tutorials assume you want to spend an afternoon on this. You don't. With What is a carousel slider? A carousel slider is a UI component that displays content in a horizontal (or vertical) sequence, letting users swipe or click through items one at a time. Think image galleries, testimonial rotators, product showcases, or feature highlights. The content slides into view with a transition effect while the rest stays hidden. Good carousel sliders are touch-friendly on mobile, support keyboard navigation, and include visual indicators like dots or arrows so users know there's more content to see. Live demo Here's the carousel slider running live. Swipe, click the arrows, or use keyboard navigation to move between slides. This is the actual transform - not a screenshot. How to add a carousel slider to your website Two steps. Add the script tag, then write your HTML. Step 1: Add the script The Swiper transform is a premium component. After signing up for a Pro or Agency plan at Paste this before the closing </head> tag or at the end of your page. It loads only the transforms you selected - nothing extra. Step 2: Add the HTML Wrap your slides in a container with the ot=\ That's it. The transform picks up your children, wraps them as slides, and initializes a touch-enabled carousel with navigation arrows and bullet pagination. You can put anything inside each slide - images, cards, text blocks, video embeds, entire sections. The carousel doesn't care what the content is. Transition effects Six built-in effects you can switch with a single attribute: slide - standard horizontal movement (default) fade - cross-dissolve between slides coverflow - 3D perspective with depth and rotation, great for galleries cards - stacks slides like a deck of cards cube - 3D cube rotation flip - 3D flip transition To use the coverflow effect: For the cards effect: Navigation and pagination options You control navigation and pagination with HTML attributes. No CSS to write - the transform includes styled controls by default. Navigation arrows: Add ot-navigation=\ Pagination: Set ot-pagination to one of three styles - bullets (dots), fraction (1/5 counter), or progressbar (progress bar). Scrollbar: Add ot-scrollbar=\ You can combine all three at once. Here's a slider with arrows, fraction pagination, and multiple visible slides: Autoplay and looping Want the carousel to advance automatically? Add ot-autoplay=\ ot-autoplay-pause=\ If you want the slider to jump back to the first slide instead of seamlessly looping, use ot-rewind=\ Multiple slides and spacing Show more than one slide at a time with ot-slides-per-view. Add gaps between slides with ot-space-between (pixels): Set ot-slides-per-view=\ All configuration options Every option is controlled via ot- HTML attributes. Here's the full list: ot-direction - horizontal or vertical (default: horizontal) ot-slides-per-view - number of visible slides or \ ot-space-between - gap between slides in pixels (default: 0) ot-speed - transition speed in milliseconds (default: 300) ot-loop - infinite loop (default: false) ot-rewind - rewind to first slide after last (default: false) ot-effect - slide, fade, coverflow, cards, cube, or flip (default: slide) ot-autoplay - enable autoplay (default: false) ot-autoplay-delay - autoplay delay in ms (default: 3000) ot-autoplay-pause - pause autoplay on hover (default: false) ot-pagination - bullets, fraction, or progressbar ot-navigation - show prev/next arrows (default: false) ot-scrollbar - show draggable scrollbar (default: false) ot-centered - center the active slide (default: false) ot-free-mode - free scrolling without snapping (default: false) ot-grab-cursor - show grab cursor on hover (default: false) ot-autoheight - adjust height to active slide (default: false) ot-keyboard - enable keyboard navigation (default: false) ot-mousewheel - enable mousewheel navigation (default: false) Works on every platform The carousel slider works anywhere you can add a script tag and HTML. That includes: Static HTML, React, Vue, Next.js - just add the script tag and HTML See the platform-specific guides linked above for step-by-step instructions on each one. Common use cases Image galleries - showcase photography, portfolio pieces, or product images with coverflow or fade effects Testimonial sliders - rotate customer reviews with autoplay and pagination dots Produ

## Count Up Animation - How to Add Animated Number Counters to Any Websit

**URL:** https://dev.divhunt.com/blog/count-up-animation

Add animated number counters that count up on scroll to any website. One HTML attribute, no JavaScript. Supports prefixes, suffixes, decimals, and easing.
Name: Count Up Animation - How to Add Animated Number Counters to Any Websit
Created: 2026-03-03 20:33:29.466678+00
Description: Add count up animations that trigger on scroll to any website. Works on Webflow, WordPress, Shopify, and any platform. Supports formatting, easing, and replay.
Content: Stats sections look flat when the numbers just sit there. A count up animation makes them feel alive - the numbers start at zero and animate to their final value when visitors scroll to them. It is one of the most common landing page patterns, and building it from scratch takes more effort than it should. The demo above shows it in action. Those numbers animate when they enter the viewport. You can have the same thing on your site with a single HTML attribute. What is a count up animation? A count up animation (also called an animated number counter) makes a number animate from a starting value to an end value. Typically it starts at zero, counts up to the target number, and uses easing so it starts fast and slows down toward the end. The animation triggers when the element scrolls into view, so visitors see it happen in real time. You see count up animations on stats sections (\ How do you add a count up animation to a website? Two steps. First, add the Count Up is a premium transform - you need a Second, add an element with the ot=\ That is it. When this element scrolls into view, it animates from 0 to 1500 with easing. No JavaScript to write, no IntersectionObserver to set up, no animation library to configure. Can you customize the counter animation? Yes. Everything is controlled through HTML attributes. Here are all the options: Prefix and suffix - add text before or after the number. Dollar signs, percentage marks, \ Decimal places - show precision for ratings, percentages, or currency: Duration - how long the animation takes in seconds. Default is 2: Starting value - count from a number other than zero: Disable easing - use a constant linear speed instead of the default ease-out: Replay on scroll - by default the counter plays once and stays at the final number. Set ot-once to false to replay every time the element scrolls back into view: Custom separators - change the thousands separator or decimal character for different locales: How to build a stats section with multiple counters The most common pattern is a row of counters showing different metrics. Each counter is independent - it triggers when it scrolls into view. Here is a typical stats section: Each counter animates independently when it enters the viewport. Mix different suffixes, decimals, and durations to make each number feel distinct. Does it work on Webflow, WordPress, and Shopify? Yes. The setup is the same on every platform - add the script tag once, then use the ot=\ Webflow Paste the script tag in Site Settings > Custom Code > Footer Code. For the counter, you have two options: add an Embed element with the HTML, or add ot|count-up and ot-end|1500 as custom attributes on any existing element. Requires a Basic plan ($14/mo) or higher. WordPress Install the free WPCode plugin and paste the script tag in Header & Footer > Header. Then use a Custom HTML block in the Gutenberg editor for the counter markup. Works on any self-hosted WordPress site. Squarespace Add the script tag in Website > Website Tools > Code Injection > Header. Use a Code Block (set to HTML, Display Source off) for the counter. Requires a Core plan ($23/mo) or higher. Shopify Add the script tag in theme.liquid before the closing head tag. Then use a Custom Liquid section in the theme editor. Works on Basic plan ($39/mo) and up. Elementor Elementor Pro users can add custom attributes directly: go to Advanced > Attributes and add ot|count-up and ot-end|1500. Elementor Free users can use the HTML widget instead. Add the script tag via the free WPCode plugin. Count up animation vs building it yourself Building a count up animation from scratch means setting up an IntersectionObserver to detect when the element is visible, writing the animation loop with requestAnimationFrame, implementing easing math, formatting numbers with separators and decimals, and handling edge cases like replay on scroll. Libraries like CountUp.js simplify this, but you still need to write JavaScript to initialize each counter, configure options, and handle scroll detection. With OneType, the HTML attribute does everything - you set the target number and formatting, the script handles the rest. Full configuration reference Every option with its default value: ot-end - target number (required) ot-start - starting number (default: 0) ot-duration - animation duration in seconds (default: 2) ot-decimals - number of decimal places (default: 0) ot-prefix - text before the number, e.g. $ (default: empty) ot-suffix - text after the number, e.g. % or k (defa

## Typewriter Effect CSS - How It Works and a Simpler Alternative

**URL:** https://dev.divhunt.com/blog/typewriter-effect-css

Build a CSS typewriter effect with keyframes, or skip the code entirely with a one-attribute solution that handles multiple strings and cursor animation.
Name: Typewriter Effect CSS - How It Works and a Simpler Alternative
Created: 2026-03-03 20:32:07.258453+00
Description: The CSS-only typewriter effect, its limitations, and a zero-code alternative that supports multiple strings, smart backspace, and cursor customization.
Content: The CSS typewriter effect is one of the most searched text animations. You can build one with pure CSS - no JavaScript at all. But it comes with real limitations that most tutorials skip over. Here is the CSS approach, what it can and cannot do, and a simpler alternative when you need more than a single static string. How does a CSS typewriter effect work? The trick is two CSS animations working together. One animation reveals the text character by character using width. The other blinks a border that acts as a cursor. The width animation goes from 0 to 100% in discrete steps, revealing one character at a time. The steps() function makes it jump instead of smoothly transitioning - that is what creates the character-by-character illusion. The border-right with a blink animation creates the cursor. What are the limitations of CSS-only typewriter effects? The CSS approach works for demos and simple use cases, but it breaks down fast: Single string only - you cannot cycle through multiple strings. No delete-and-retype behavior. Requires monospace font - the width trick only works when every character has the same width. Use a proportional font and the timing breaks. Fixed character count - you need to know the exact number of characters and hardcode the steps() value. Change the text and you have to update the CSS. No delete animation - CSS cannot reverse the typing to simulate backspace. No smart backspace - cannot keep shared prefixes and only retype the part that changes. No inline pauses - cannot pause at specific points within the text. Plays once on load - the animation runs when the page loads and that is it. No scroll trigger, no hover trigger, no replay. If all you need is a single line of monospace text that types once on page load, CSS works fine. For anything beyond that - rotating taglines, hero text, dynamic content - you need JavaScript. How to add a typewriter effect without writing CSS or JavaScript Then add the typewriter HTML: This gives you everything CSS cannot - multiple strings, delete animation, smart backspace, cursor customization, looping, and shuffle. Works with any font, not just monospace. And the character count does not matter - it figures that out automatically. CSS typewriter vs OneType Transforms Multiple strings - CSS: no. OneType: yes, unlimited. Delete and retype - CSS: no. OneType: yes, with smart backspace. Any font - CSS: monospace only. OneType: any font. Cursor customization - CSS: border hack. OneType: any character, show/hide. Loop - CSS: requires animation-iteration-count workaround. OneType: ot-loop attribute. Inline pauses - CSS: not possible. OneType: ^1000 syntax. Setup time - CSS: write and debug keyframes + steps. OneType: paste HTML, done. For the full list of customization options - speed, cursor character, back delay, shuffle, and more - see the Is the typewriter effect free? Yes. The typewriter transform is free on
Question 1: Can you create a typewriter effect with only CSS?
Answer 1: Yes, but only for a single fixed string in a monospace font. CSS uses width animation with steps() to reveal text character by character. It cannot cycle through multiple strings, delete, or retype.
Question 2: Why does the CSS typewriter effect need monospace fonts?
Question 3: What is the best way to add a typewriter effect to a website?
Question 4: Does the CSS typewriter effect work with multiple strings?
Answer 4: No. Pure CSS cannot cycle through different strings. You would need JavaScript to handle deleting one string and typing another. OneType Transforms does this automatically with multiple span elements.
Answer 3: For a single static string, CSS keyframes work. For multiple rotating strings with delete-and-retype behavior, use OneType Transforms - it handles everything through HTML attributes with no JavaScript to write.
Answer 2: The CSS trick animates the element width in equal steps. Each step reveals one character. If characters have different widths (like in proportional fonts), the steps do not align and the timing looks broken.
Iframe: https://preview.transforms.onetype.ai/typewriter?single:boolean=true
Created: 2026-03-03 20:32:07.258453+00

## Dynamic Filters

**URL:** https://dev.divhunt.com/features/dynamic-filters

Name: Dynamic Filters
Created: 2025-07-13 19:12:21.009413+00
Content: Overview Dynamic filters in Divhunt bring front-end filtering to a whole new level. This feature lets your site visitors interact with large sets of Everything is fully visual. You can set up checkbox filters, numeric ranges like price or square meters, selects, multi-selects, and toggle filters like \ Filters are saved in the URL, making the results shareable and easy to bookmark. You can recreate the experience of advanced portals like CityExpert or Booking, with precision filtering that feels fully custom. Benefits This feature works only with Divhuntu2019s native CMS, and thatu2019s what allows it to be this fast and deeply integrated. Every filter talks directly to your CMS collections and supports any field type u2014 from single and multi-relation to toggles, text, and numeric fields. You donu2019t need to worry about performance or limitations. The filtering logic is powerful. For example, when users select multiple features, you can decide whether to show items matching all of them or just one. This matters in real-world use cases like real estate, where a user might be looking for listings with both air conditioning and internet. And with dynamic filters, that works flawlessly. Dynamic filters are one of the most advanced tools inside Divhunt u2014 and theyu2019re unmatched in any other no-code platform. You wonu2019t find anything like this in
Short description: This feature lets your site visitors interact with large sets of CMS content — like real estate listings, rentals, or product catalogs — and refine what they see instantly, without writing a single line of code.
Created: 2025-07-13 19:12:21.009413+00

## USA Hosting

**URL:** https://dev.divhunt.com/features/usa-hosting

Name: USA Hosting
Created: 2025-07-13 14:15:20.760292+00
Content: Overview With USA Hosting, Divhunt gives you the option to host your project on high-performance servers based in the United States. This is ideal for teams, agencies, or SaaS companies primarily targeting American audiences u2014 ensuring the lowest latency and fastest response times for users in the region. Unlike many platforms that donu2019t offer a choice, Divhunt lets you decide your hosting location during project setup. Whether you need Our US-based infrastructure is powered by providers like Benefits Choosing USA Hosting ensures your content is delivered fast to American users, improves your Lighthouse and Core Web Vitals scores locally, and reduces unnecessary latency for geographically sensitive projects. Itu2019s a perfect fit for
Short description: With USA Hosting, Divhunt gives you the option to host your project on high-performance servers based in the United States. This is ideal for teams, agencies, or SaaS companies primarily targeting American audiences — ensuring the lowest latency and fastest response times for users in the region.
Category: Hosting
Created: 2025-07-13 14:15:20.760292+00

## Europe Hosting

**URL:** https://dev.divhunt.com/features/europe-hosting

Name: Europe Hosting
Created: 2025-07-13 14:03:48.235532+00
Content: Overview With Europe Hosting, Divhunt gives you full control over your projectu2019s server location u2014 a must-have for companies operating in privacy-sensitive markets like the EU. When starting a new project, you can now choose to host your data on servers in Germany, ensuring full alignment with GDPR and other local data residency laws. But it doesn't stop there. Divhunt also lets you choose While we currently support hosting in Germany and the USA, more regions will be added soon u2014 giving you even more options to tailor performance, privacy, and compliance for your users. Benefits For Pair that with Divhuntu2019s Divhunt makes it easy to do what other platforms donu2019t u2014 give you freedom, privacy, and performance all at once.
Short description: With Europe Hosting, Divhunt gives you full control over your project’s server location — a must-have for companies operating in privacy-sensitive markets like the EU. When starting a new project, you can now choose to host your data on servers in Germany, ensuring full alignment with GDPR and other local data residency laws.
Category: Hosting
Created: 2025-07-13 14:03:48.235532+00

## Sections Lazy Load

**URL:** https://dev.divhunt.com/features/sections-lazy-load

Name: Sections Lazy Load
Created: 2025-07-13 13:50:22.391563+00
Content: Overview Divhunt is the first and only no-code builder to introduce true HTML-based Lazy Load Sections. This innovation lets you load section content only as users scroll, instead of rendering everything upfront like traditional builders. The result? Lightning-fast load times, seamless navigation, and the freedom to build massive pages without sacrificing performance. Whether you're designing long landing pages, content-rich websites, or experimental layouts, Lazy Load Sections give you total control over performance at scale. The feature is built natively into Divhuntu2019s visual builder u2014 no plugins, no hacks. Just toggle it on per section and watch your site stay lean and fast, no matter how much content you stack. Benefits By loading only whatu2019s visible on screen, Lazy Load Sections dramatically improve your siteu2019s Fast Load Times. Users get instant access to top-of-page content, while everything else loads on scroll. This keeps the experience smooth, minimizes bandwidth usage, and delivers near-instant rendering u2014 even with thousands of sections on one page. This performance boost also leads to stronger Lighthouse scores, better Core Web Vitals, and smoother interactions overall. And while this feature is invisible to users, itu2019s fully optimized for SEO: Google and other crawlers get the full HTML output, ensuring your content is properly indexed and ranked. Divhunt remains the only no-code platform to offer this kind of lazy load technology at the native HTML level. Paired with our
Short description: This innovation lets you load section content only as users scroll, instead of rendering everything upfront like traditional builders.
Category: Performance
Created: 2025-07-13 13:50:22.391563+00

## Multiple Single Pages

**URL:** https://dev.divhunt.com/features/multiple-single-pages

Name: Multiple Single Pages
Created: 2025-07-13 11:26:52.8881+00
Content: Overview In Divhunt, one CMS item doesnu2019t mean just one single page. You can create multiple full pages for the same item, each with its own URL and layout. That means if you have a CMS for hotels, youu2019re not stuck with just /hotels/:slug u2014 you can also add /hotels/:slug/rooms, /hotels/:slug/reviews, /hotels/:slug/gallery, and more. This gives you the power to design complete micro-sites per item, structured exactly the way you want. This concept doesnu2019t exist in most no-code tools. Benefits Youu2019re no longer forced to put every detail of your item on a single, long page. Instead, you can split your content into logically separated pages, each with its own design and dynamic content. That means better navigation, faster loading, and clearer storytelling. It's easier for visitors to find what they need, and easier for you to maintain or expand. Multiple single pages also improve your SEO game. Search engines can better index the structure of your content, and users get clear URLs that reflect the specific view theyu2019re looking at. Behind the scenes, everything is optimized u2014 there's no duplicated rendering or data conflicts. Use Cases A travel site can show /destinations/:slug for a destination overview, /destinations/:slug/hotels for available stays, and /destinations/:slug/reviews for feedback u2014 all pulling from the same CMS item.  These pages can each use different components, layouts, and
Short description: In Divhunt, one CMS item doesn’t mean just one single page. You can create multiple full pages for the same item, each with its own URL and layout.
Created: 2025-07-13 11:26:52.8881+00