Convert data attributes to camelCase
Switch between an HTML data attribute and its JavaScript dataset name, both ways: data-user-profile-id becomes userProfileId, and userProfileId turns back into data-user-profile-id, following the browser's own rules. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Text
- data-user-profile-id
- Direction
- Attribute to property
- Output
- userProfileId
- Input
- data-user-profile-id
- Data attribute
- data-user-profile-id
- Dataset property
- userProfileId
HTML custom data attributes use names such as data-user-profile-id, while JavaScript exposes the same value through a camelCase dataset property such as userProfileId. This converter applies the browser naming rules in either direction, so you can move confidently between markup and DOM code without guessing where hyphens belong. Choose the direction, enter one name, and receive both forms. Forward conversion explicitly rejects names without the required data- prefix, helping catch accidental class names, ordinary attributes, and incomplete snippets before they reach application code.
Convert an HTML data attribute into a dataset property
Choose attribute to property when your starting point is markup, a template, or an attribute copied from browser developer tools. The input must begin with data-; for example, data-user-profile-id becomes userProfileId. The conversion follows the DOM naming algorithm rather than applying a generic title-case recipe.
ASCII capital letters in the attribute name are normalized to lowercase first. After the data- prefix is removed, each hyphen immediately followed by an ASCII lowercase letter is removed and that letter is capitalized. Other characters, including underscores, periods, extra hyphens, digits, and non-ASCII characters, are preserved.
That distinction matters for unusual but valid keys: data-build-2-id becomes build-2Id because the hyphen before 2 is not consumed, while the hyphen before i is. A missing data- prefix produces an input error instead of a plausible-looking but incorrect property.
Convert a dataset property back into an HTML attribute
Choose property to attribute when your starting point is JavaScript, such as element.dataset.userProfileId, and you need the corresponding name for HTML, CSS selectors, tests, or a server-rendered template. The converter adds data- and inserts a hyphen before every ASCII uppercase letter, changing that letter to lowercase. Digits and punctuation remain in place.
The DOM reverse algorithm has an important precondition: the property name cannot already contain a hyphen immediately followed by an ASCII lowercase letter. A key such as user-profile is ambiguous because converting it forward would consume that hyphen and produce userProfile instead of returning the original key. This tool reports that condition as invalid input rather than pretending the conversion is safely reversible.
A hyphen followed by a digit, uppercase letter, or non-ASCII character is not subject to that precondition and remains available for conversion. The returned object again contains both representations, so the generated attribute can be pasted directly while the original property remains visible for comparison.
What you can do with it
Write DOM access code from markup
Turn a copied data-* attribute into the exact key needed after element.dataset in JavaScript.
FAQ
Is this the same as a generic kebab-case to camelCase converter?
No. It follows the DOM dataset character rules and preserves punctuation that a generic case converter may remove.
Why can a reverse conversion reject a hyphenated property?
A hyphen followed by a lowercase ASCII letter violates the DOM reverse-conversion precondition and would not round-trip to the same property name.
Are digits and underscores supported?
Yes. They are preserved; only ASCII uppercase letters and qualifying hyphen-lowercase pairs are transformed.
Why is a name without data- at the start rejected?
Only attributes that begin with data- have a matching property in dataset. Rejecting everything else catches class names, ordinary attributes or incomplete snippets before they reach your code.
What happens with two hyphens in a row?
Only a hyphen followed directly by a lowercase letter is removed. In data-release--channel the first hyphen stays because another hyphen follows it, and the second disappears before the c, giving release-Channel.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/web/data-attribute-camel-convert \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"data-user-profile-id","direction":"attribute_to_property"}'const res = await fetch("https://api.kit.forhosting.com/web/data-attribute-camel-convert", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "data-user-profile-id",
"direction": "attribute_to_property"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/data-attribute-camel-convert",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "data-user-profile-id",
"direction": "attribute_to_property"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/data-attribute-camel-convert", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"data-user-profile-id","direction":"attribute_to_property"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"data-user-profile-id","direction":"attribute_to_property"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/data-attribute-camel-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
timeout_sec | 30 |
max_crawl_pages | 25 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Convert an HTML data attribute into a dataset property
The result includes a direct output field plus explicitly named data_attribute and dataset_property fields, making it convenient for humans, scripts, and API clients to identify each representation without relying on field order.
Convert a dataset property back into an HTML attribute
Thus userProfileId becomes data-user-profile-id, and apiV2Endpoint becomes data-api-v2-endpoint.
Use exact DOM naming rules instead of generic case conversion
A general camelCase formatter usually treats spaces, underscores, repeated punctuation, and hyphens as interchangeable word separators. JavaScript dataset mapping does not. It is a narrowly defined character transformation designed to connect HTML attribute names with keys on DOMStringMap. For example, data-release--channel becomes release-Channel: the first hyphen stays because it is followed by another hyphen, while the second is removed because it is followed by lowercase c. This capability is deterministic, uses no network, stores nothing, and gives the same output in the browser and through the API. It is useful both as a quick interactive reference and as a validation step in code generators or build pipelines. When automating, send the text and direction fields and treat invalid_input as a signal that the source is not a data-* attribute or that a requested reverse mapping violates the dataset precondition.
Integration use cases
Generate server-rendered attributes
Convert dataset property names from an application schema into attribute names for HTML templates.
Validate test and selector fixtures
Keep HTML attributes, dataset assertions, and CSS attribute selectors aligned with the browser naming rules.
Technical questions
What happens if the attribute does not start with data-?
Forward conversion returns an invalid_input error because only data-* attributes map to JavaScript dataset properties.
How much does the API cost?
Each request costs $0.002. You can also run one-off conversions in the browser.