Open API

Developer Widgets

Embed FiveM native reference tools on your website — auto-link native names, add a search box, or embed info cards. All free, all open.

3Widgets

3API Endpoints

~3 KBPer Widget

Who is this for?

These widgets are built for FiveM community developers. Drop them onto any website — zero deps, zero config, just a single script tag.

📖Resource DocumentationAuto-link native names in your resource docs so users can hover & see signatures instantly.

💬Community ForumsAdd the search widget to your FiveM forum sidebar — let users find natives without leaving your site.

🎓Tutorial SitesEmbed native cards in your tutorials so readers can see full signatures, params, and examples inline.

🛒Tebex / Store ListingsShowcase which natives your resource uses with embed cards — builds trust and helps buyers understand the code.

Auto-Linker

Automatically detects FiveM native names in your <code> and <pre> blocks, wraps them in links to cfxnatives.dev, and shows a tooltip with the function signature on hover.

Zero config~3 KB gzippedDark & Light themeSPA compatibleWhitelist / BlacklistSEO backlinks

Quick start

<script src="https://cfxnatives.dev/widget/autolink.js" defer></script>

Example — Resource documentation page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Resource Docs</title>
</head>
<body>
  <h1>esx_vehicleshop</h1>
  <p>This resource uses the following natives:</p>

  <pre>
    local ped = GetPlayerPed(-1)
    local vehicle = CreateVehicle(model, x, y, z, heading, true, false)
    SetEntityCoords(vehicle, x, y, z)
    SetVehicleNumberPlateText(vehicle, "ESX")
  </pre>

  <!-- All native names above become clickable links! -->
  <script src="https://cfxnatives.dev/widget/autolink.js" defer></script>
</body>
</html>

Whitelist / Blacklist control

<!-- This code block will be auto-linked -->
<pre>
  local ped = GetPlayerPed(-1)
</pre>

<!-- This code block will be SKIPPED -->
<pre data-nativehub-ignore>
  local ped = GetPlayerPed(-1)
</pre>

<!-- Ignore an entire section -->
<div data-nativehub-ignore>
  <pre>local v = CreateVehicle(...)</pre>
  <code>SetEntityCoords(v, x, y, z)</code>
</div>

Only-mode — opt-in instead of opt-out

<!-- With data-only="true", ONLY elements with data-nativehub-only are processed -->
<script
  src="https://cfxnatives.dev/widget/autolink.js"
  data-only="true"
  defer
></script>

<!-- This WILL be processed -->
<pre data-nativehub-only>
  local ped = GetPlayerPed(-1)
</pre>

<!-- This will NOT be processed (no attribute) -->
<pre>
  local vehicle = CreateVehicle(...)
</pre>

Light theme with custom selector

<script
  src="https://cfxnatives.dev/widget/autolink.js"
  data-theme="light"
  data-selector=".my-code-block"
  defer
></script>

Option	Values	Default
`data-theme`	dark · light	`dark`
`data-selector`	Any CSS selector	`pre, code`
`data-only`	true — only-mode (opt-in)	`false`
`data-no-style`	true — BYO styles	`false`

Element Attribute	Effect
`data-nativehub-ignore`	Skip this element and all its children
`data-nativehub-only`	Process only this element (requires `data-only="true"` on script)

LiveHover over native names below

Lua

-- esx_vehicleshop example
local playerPed = GetPlayerPed(-1)
local coords = GetEntityCoords(playerPed)

local vehicle = CreateVehicle(model, coords.x, coords.y, coords.z, 90.0, true, false)
SetVehicleNumberPlateText(vehicle, "CFXDEV")
SetEntityHeading(vehicle, 180.0)
SetPedIntoVehicle(playerPed, vehicle, -1)

-- Freeze the vehicle temporarily
FreezeEntityPosition(vehicle, true)
Wait(2000)
FreezeEntityPosition(vehicle, false)

Loading auto-linker…

Native names become clickable links with hover tooltips showing the full signature.

Search Widget

A drop-in search box that queries cfxnatives.dev in real-time. Add it to your sidebar, docs page, or community portal. Results link back to the full native documentation.

Instant resultsKeyboard navigationDark & Light themeDebounced API calls~4 KB gzipped

Quick start

<div id="nativehub-search"></div>
<script src="https://cfxnatives.dev/widget/search.js" defer></script>

Example — Forum sidebar

<aside class="forum-sidebar">
  <h3>Native Reference</h3>
  <p>Search FiveM natives without leaving the forum:</p>

  <div id="native-search"></div>
  <script
    src="https://cfxnatives.dev/widget/search.js"
    data-target="native-search"
    data-theme="dark"
    data-placeholder="Search natives..."
    data-limit="5"
    defer
  ></script>
</aside>

Example — React / Next.js

'use client';
import { useEffect, useRef } from 'react';

export function NativeSearch() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://cfxnatives.dev/widget/search.js';
    s.defer = true;
    s.setAttribute('data-target', 'nh-search');
    s.setAttribute('data-theme', 'dark');
    document.body.appendChild(s);
    return () => { document.body.removeChild(s); };
  }, []);

  return <div id="nh-search" ref={ref} />;
}

Option	Values	Default
`data-theme`	dark · light	`dark`
`data-target`	Element ID to mount into	`nativehub-search`
`data-placeholder`	Custom placeholder text	`Search FiveM natives...`
`data-limit`	1–25	`8`
`data-no-style`	true — BYO styles	`false`

LiveTry searching for a native

Widget

Loading search widget…

Type a native name and use arrow keys to navigate. Press Enter to open.

Embed Card

Embed a native info card via iframe. Shows the signature, parameters, framework badges, and a code snippet — all in a compact, self-contained card. Perfect for resource documentation or README pages.

Zero JavaScriptDark & Light themeResponsiveCDN cached (24 h)

Basic embed

<iframe
  src="https://cfxnatives.dev/embed/GET_PLAYER_PED"
  width="420"
  height="280"
  frameborder="0"
  style="border-radius: 12px"
></iframe>

Example — Tebex / store listing

<div class="resource-natives">
  <h3>Natives Used</h3>
  <div style="display: flex; gap: 16px; flex-wrap: wrap">
    <iframe src="https://cfxnatives.dev/embed/GET_PLAYER_PED" width="420" height="280" frameborder="0"></iframe>
    <iframe src="https://cfxnatives.dev/embed/CREATE_VEHICLE" width="420" height="280" frameborder="0"></iframe>
    <iframe src="https://cfxnatives.dev/embed/SET_ENTITY_COORDS" width="420" height="280" frameborder="0"></iframe>
  </div>
</div>

Markdown (GitHub README)

## Natives Used

![GET_PLAYER_PED](https://cfxnatives.dev/embed/GET_PLAYER_PED)
![CREATE_VEHICLE](https://cfxnatives.dev/embed/CREATE_VEHICLE)

Live preview

LiveTry any native name

iframe

<iframe src="https://cfxnatives.dev/embed/GET_PLAYER_PED?theme=dark" width="420" height="280" frameborder="0"></iframe>

Type any native name, pick a theme, and click Preview. The embed code updates automatically.

API

Public Endpoints

All widgets use these public endpoints. You can use them directly to build custom integrations — Discord bots, CLI tools, IDE plugins, etc.

Single native lookup

GET https://cfxnatives.dev/api/natives/lookup?name=GetPlayerPed

→  {
     "found": true,
     "native": {
       "name": "GET_PLAYER_PED",
       "hash": "0xD80958FC74E988A0",
       "namespace": "PED",
       "returnType": "Ped",
       "params": [{ "name": "playerId", "type": "Player" }],
       "url": "https://cfxnatives.dev/natives/GET_PLAYER_PED",
       "description": "Returns the ped handle of the specified player..."
     }
   }

Search natives

GET https://cfxnatives.dev/api/natives/search?q=player+ped&limit=5

→  {
     "count": 5,
     "results": [
       { "name": "GET_PLAYER_PED", "hash": "0xD80958FC74E988A0", ... },
       { "name": "GET_PLAYER_PED_SCRIPT_INDEX", ... },
       ...
     ]
   }

Full data dump (Discord bot / tools)

GET https://cfxnatives.dev/api/natives

→  { "count": 7358, "frameworks": [...], "natives": [...] }
   ETag support · CDN cached (1 h)

Example — cURL

# Lookup a single native
curl -s "https://cfxnatives.dev/api/natives/lookup?name=GetPlayerPed" | jq .

# Search
curl -s "https://cfxnatives.dev/api/natives/search?q=vehicle&limit=3" | jq .results[].name

Example — JavaScript fetch

const res = await fetch('https://cfxnatives.dev/api/natives/lookup?name=CreateVehicle');
const { found, native } = await res.json();

if (found) {
  console.log(native.name);       // "CREATE_VEHICLE"
  console.log(native.returnType); // "Vehicle"
  console.log(native.params);     // [{ name: "modelHash", type: "Hash" }, ...]
}

Example — Python

import requests

res = requests.get("https://cfxnatives.dev/api/natives/search", params={"q": "vehicle", "limit": 5})
data = res.json()

for native in data["results"]:
    print(f"{native['name']} → {native['url']}")

Rate Limiting

All API endpoints are protected by Upstash Redis-based sliding window rate limiting. Responses include X-RateLimit-Limit, X-RateLimit-Remaining, and X-RateLimit-Reset headers so you can adapt your request patterns.

30Requests / minute

429Status when exceeded

60sSliding window

Tip: The widgets already handle rate limits gracefully — they use debouncing and local caching. If you're building a custom integration, cache responses on your side and respect the Retry-After header when you get a 429.

429 response example

HTTP/1.1 429 Too Many Requests
X-RateLimit-Limit: 30
X-RateLimit-Remaining: 0
X-RateLimit-Reset: 1709424000000
Retry-After: 42

{ "error": "Too many requests. Please try again later." }

SEO & Traffic Benefits

✓Auto-Linker creates real <a> tags that search engines crawl — every linked native name becomes a backlink.
✓Search Widget footer includes a "Powered by cfxnatives.dev" link — natural, contextual referral traffic.
✓Embed Cards show a "View full docs on cfxnatives.dev →" CTA — users click through for the full experience.
✓All widgets use rel="noopener" (not nofollow) — link equity flows through to cfxnatives.dev.
✓Schema.org markup on the main site + widget backlinks build topical authority for "FiveM native" queries.