Detailed explanation of the Number field in ButterCMS, including input, output, configuration options, and use cases
The Number field only accepts number entries (integers and decimals) and returns a JSON number in the API, which makes it perfect for prices, quantities, and dimensions.
Always use the Number field for numeric data instead of Short Text. This ensures proper type validation and returns the correct data type in your API response.
Number fields support decimal/float values with no restriction on the number of places after the decimal. This includes both 0.00 and negative numbers.
Be aware of JavaScript’s number precision limits for very large numbers:
// Safe integer range in JavaScriptconsole.log(Number.MAX_SAFE_INTEGER); // 9007199254740991// For larger numbers, consider storing as strings// and using BigInt in your application
Always use the Number field for numeric data instead of Short Text. This ensures proper type validation and returns the correct data type in your API response.
// Number field{ "price": 29.99 }// Short Text (incorrect approach){ "price": "29.99" }
// Fetching and using number fieldsconst butter = require('buttercms')('your-api-key');const response = await butter.page.retrieve('*', 'product-page');const product = response.data.data.fields;// Numbers are returned as actual numbers, not stringsconst price = product.price; // 29.99 (number)const quantity = product.stock_quantity; // 100 (number)// Format for displayconst formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD'}).format(price); // "$29.99"// Math operations work directlyconst total = price * quantity; // 2999