index.html

---
layout: default
title: APIs.json Builder
---

<!-- Main -->
<section id="banner">
	<div class="content">

		<header>
			<h2 onclick="show('json-store');">APIs.json Builder</h2>
		</header>
		
		<p style="margin-left; 15px; margin-right: 15px;">This is an APIs.json builder, allowing you to assemble <a href="https://apisjson.org/">an APIs.json (0.16) index</a> for your API operations, and then save and copy to clipboard so you can publish somewhere of your choice. </p>
		
		<!-- JSON Store -->
		<div id="json-store" style="display: none;">
			<p><strong>JSON Store</strong></p>
			<textarea  id="json-store-data" style="width: 100%; height: 150px;" onchange="saveChanges(); return false;"></textarea>
		</div>
		<!-- JSON Store -->

		<form>
			<div id="form"></div>
		</form>
		<div class="alert alert-success" role="alert" id="alert" style="display: none; text-align: center;">
			A simple success alert—check it out!
		</div>
		
		<p style="margin-left; 15px; margin-right: 15px;">If you encounter any bugs or have any questions, feel free to <a href="https://github.com/apis-json/builder/issues">leave an issue on the GitHub repository</a> powering this tool, or go ahead and fork and make the change.</p>
				
		<center>
		<button type="button" onclick="saveChanges(); return false;">Save Changes</button>
		<button type="button" onclick="reset(); return false;">Reset</button>
		<button type="button" onclick="copyToClipboard(); return false;">Copy to Clipboard</button>
		</center>
		<script>

			var date = new Date();
			var yyyy = date.getFullYear().toString();                                    
			var mm = (date.getMonth()+1).toString();      
			var dd  = date.getDate().toString();    

			function show(id){
				if(document.getElementById(id).style.display == 'none'){
					document.getElementById(id).style.display = '';
				}
				else{
					document.getElementById(id).style.display = 'none';
				}
			}

			function saveRoot(id){
				field = id.replace('api_json_','');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data[field] = document.getElementById(id).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}

			function saveAPI(id,api){
				field = id.replace('api_','');
				field = field.replace('_' + api,'');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data.apis[api][field] = document.getElementById(id + '_' + api).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}	
			
			function saveProperty(id,api,property){
				field = id.replace('api_property_','');
				field = field.replace('_' + api,'');
				field = field.replace('_' + property,'');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data.apis[api].properties[property][field] = document.getElementById(id + '_' + api + '_' + property).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}	
			
			function saveContact(id,api,contact){
				field = id.replace('api_contact_','');
				field = field.replace('_' + api,'');
				field = field.replace('_' + contact,'');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data.apis[api].contact[contact][field] = document.getElementById(id + '_' + api + '_' + contact).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}	
			
			function saveMaintainer(id,maintainer){
				field = id.replace('api_maintainer_','');
				field = field.replace('_' + maintainer,'');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data.maintainers[maintainer][field] = document.getElementById(id + '_' + maintainer).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}	
			
			function saveCommon(id,common){
				field = id.replace('api_common_','');
				field = field.replace('_' + common,'');
				console.log(field);
				var json_data = JSON.parse(document.getElementById('json-store-data').value);
				json_data.common[common][field] = document.getElementById(id + '_' + common).value;
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				console.log('done');
			}				

			function addProperty(type,url){
				var property = {};

				property.type = type;
				property.url = url;

				return property;
			}


			function addContact(FN,url,email){

				var contact = {};
				contact.FN = FN;
				contact.url = url;
				contact.email = email;	
				
				return contact;
			}

			function addCommon(type,url){
				var property = {};

				property.type = type;
				property.url = url;

				return property;
			}			

			function addMaintainer(FN,url,email){
				var maintainer = {};
				maintainer.FN = FN;
				if(url != ''){
					maintainer.url = url;	
				}
				if(email != ''){
					maintainer.email = email;		
					}
				return maintainer;
			}

			function addAPI(){

				var api = {};
				api.name = "API Name";
				api.description = "This is the description of your API.";					
				api.image = "https://kinlane-productions2.s3.amazonaws.com/apis-json/apis-json-logo.jpg";
				api.humanURL = "https://developer.example.com";
				api.baseURL = "https://api.example.com";
				api.tags = ['Resource','Capability'];
				api.properties = [];					
				api.contact = [];	

				var property = addProperty('Documentation','https://example.com/documentation');
				api.properties.push(property);	

				var property = addProperty('OpenAPI','http://example.com/openapi.json');
				api.properties.push(property);								

				var contact = addContact('Name','http://example.com','info@example.com');
				api.contact.push(contact);
				
				return api;
			}
			
			function addAPIsJSON(){

				var apis_json = {};
				apis_json.name = "Starter APIs.json";
				apis_json.description = "This is a starter APIs.json that you can use to learn the specification and make your own.";
				apis_json.image = "https://kinlane-productions2.s3.amazonaws.com/apis-json/apis-json-logo.jpg";
				apis_json.url = "https://example.com/apis.json";
				apis_json.created = yyyy + '/' + mm + '/' + dd;
				apis_json.modified = yyyy + '/' + mm + '/' + dd;
				apis_json.specificationVersion = "0.16";
				apis_json.tags = ['APIs','Discovery'];
				apis_json.apis = [];
				apis_json.common = [];
				apis_json.maintainers = [];				

				var api = addAPI();
				apis_json.apis.push(api);

				var maintainer = addMaintainer('Name','http://example.com','info@example.com');
				apis_json.maintainers.push(maintainer);		

				var common = addCommon('Property Type','https://example.com');
				apis_json.common.push(common);					

				return apis_json;
			}

			function addNewAPI(){

				console.log("in");

				var json_data = JSON.parse(document.getElementById('json-store-data').value);

				var api = addAPI();
				json_data.apis.push(api);
				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);
				display();
			}

			function addNewProperty(id){

				console.log("in");

				var json_data = JSON.parse(document.getElementById('json-store-data').value);

				var property = addProperty('x-type','https://example.com');
				json_data.apis[id].properties.push(property);

				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);

				display();

				console.log('done');				

			}		

			function addNewContact(id){

				console.log("in");

				var json_data = JSON.parse(document.getElementById('json-store-data').value);

				var contact = addContact();
				json_data.apis[id].contact.push(contact);

				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);

				display();

				console.log('done');				

			}	
			
			function addNewCommon(){

				var json_data = JSON.parse(document.getElementById('json-store-data').value);

				var common = addCommon('Type','https://example.com');
				json_data.common.push(common);

				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);

				display();

				console.log('done');				

				}		
				
			function addNewMaintainer(){

				var json_data = JSON.parse(document.getElementById('json-store-data').value);

				var maintainer = addMaintainer('Name','http://example.com','info@example.com');
				json_data.maintainers.push(maintainer);

				document.getElementById('json-store-data').value = JSON.stringify(json_data, null, 2);

				display();

				console.log('done');				

				}					

			function display(){

				// Check Store
				var json_data = document.getElementById('json-store-data').value;
				
				if(json_data){	
					// Prioritize What is In Textarea When Displaying
					if(json_data == ''){					
						apis_json = addAPIsJSON();	
					}	
					else{
						apis_json = JSON.parse(json_data);
					}		
				}
				else{
					if(Cookies.get('apis_json')){
						apis_json = JSON.parse(Cookies.get('apis_json'));
					}
					else{
						apis_json = addAPIsJSON();
					}
				}

				//console.log(apis_json);
				document.getElementById('json-store-data').value = JSON.stringify(apis_json, null, 2);

				// RESET
				document.getElementById('form').innerHTML = '';

				var form = '<h3>Information</h3>';
				form += '<p>This is the general metadata about the entity behind the APIs in this APIs.json index.</p>';
				form += '<div class="mb-3">';
				form += '<label for="api_json_name" class="form-label">Name</label>';
				form += '<input type="text" class="form-control" id="api_json_name" value="' + apis_json.name + '" onchange="' + "saveRoot('api_json_name'); return false;" + '">';
				form += '</div>';
				
				form += '<div class="mb-3">';
				form += '<label for="api_json_description" class="form-label">Description</label>';
				form += '<textarea style="width: 100%; height: 100px;" class="form-control" id="api_json_description" onchange="' + "saveRoot('api_json_description'); return false;" + '">' + apis_json.description + '</textarea>';
				form += '</div>';
				
				form += '<div class="mb-3">';
				form += '<label for="api_json_image" class="form-label">Image</label>';
				form += '<input type="text" class="form-control" id="api_json_image" value="' + apis_json.image + '" onchange="' + "saveRoot('api_json_image'); return false;" + '">';
				form += '</div>';
				
				form += '<div class="mb-3">';
				form += '<label for="api_json_image" class="form-label">URL</label>';
				form += '<input type="text" class="form-control" id="api_json_url" value="' + apis_json.url + '" onchange="' + "saveRoot('api_json_url'); return false;" + '">';
				form += '</div>';

				form += '<h3>APIs (<a href="#" onclick="addNewAPI(); return false;">Add</a>)</h3>';		
				form += '<p>This is one or many definitions for individual API products offered by the entity behind this APIs.json index.</p>';	

				for (let i = 0; i < apis_json.apis.length; i++) {

					form += '<hr>';
					form += '<div class="mb-3">';
					form += '<label for="api_name" class="form-label">Name</label>';
					form += '<input type="text" class="form-control" id="api_name_' + i + '" value="' + apis_json.apis[i].name + '" onchange="' + "saveAPI('api_name','" + i + "'); return false;" + '">';
					form += '</div>';
					
					form += '<div class="mb-3">';
					form += '<label for="api_description" class="form-label">Description</label>';
					form += '<textarea style="width: 100%; height: 100px;" class="form-control" id="api_description_' + i + '" onchange="' + "saveAPI('api_description','" + i + "'); return false;" + '">' + apis_json.apis[i].description + '</textarea>';
					form += '</div>';
					
					form += '<div class="mb-3">';
					form += '<label for="api_image" class="form-label">Image</label>';
					form += '<input type="text" class="form-control" id="api_image_' + i + '" value="' + apis_json.apis[i].image + '" onchange="' + "saveAPI('api_image','" + i + "'); return false;" + '">';
					form += '</div>';
					
					form += '<div class="mb-3">';
					form += '<label for="api_humanURL" class="form-label">Human URL</label>';
					form += '<input type="text" class="form-control" id="api_humanURL_' + i + '" value="' + apis_json.apis[i].humanURL + '" onchange="' + "saveAPI('api_humanURL','" + i + "'); return false;" + '">';
					form += '</div>';
					
					form += '<div class="mb-3">';
					form += '<label for="api_baseURL" class="form-label">Base URL</label>';
					form += '<input type="text" class="form-control" id="api_baseURL_' + i + '" value="' + apis_json.apis[i].baseURL + '" onchange="' + "saveAPI('api_baseURL','" + i + "'); return false;" + '">';
					form += '</div>';					

					form += '<hr>';	

					form += '<h4>Properties (<a href="#" onclick="addNewProperty(' + i + '); return false;">Add</a>)</h4>';	
					form += '<p>These are various properties for this individual API being defined as part of this APIs.json index.</p>';	

					for (let j = 0; j < apis_json.apis[i].properties.length; j++) {

						form += '<div class="mb-3">';
						form += '<label for="api_property_type" class="form-label">Type</label>';
						form += '<input type="text" class="form-control" id="api_property_type_' + i + '_' + j + '" value="' + apis_json.apis[i].properties[j].type + '" onchange="' + "saveProperty('api_property_type','" + i + "','" + j + "'); return false;" + '">';
						form += '</div>';
						
						form += '<div class="mb-3">';
						form += '<label for="api_property_url" class="form-label">URL</label>';
						form += '<input type="text" class="form-control" id="api_property_url_' + i + '_' + j + '" value="' + apis_json.apis[i].properties[j].url + '" onchange="' + "saveProperty('api_property_url','" + i + "','" + j + "'); return false;" + '">';
						form += '</div>';

					}

					form += '<h4>Contacts (<a href="#" onclick="addNewContact(' + i + '); return false;">Add</a>)</h4>';	
					form += '<p>These are the name, url, and email for any contacts behind the individual API being included in this APIs.json index.</p>';	

					if(apis_json.apis[i].contact){
						for (let j = 0; j < apis_json.apis[i].contact.length; j++) {

							form += '<div class="mb-3">';
							form += '<label for="api_contact_FN" class="form-label">FN</label>';
							form += '<input type="text" class="form-control" id="api_contact_FN_' + i + '_' + j + '" value="' + apis_json.apis[i].contact[j].FN + '" onchange="' + "saveContact('api_contact_FN','" + i + "','" + j + "'); return false;" + '">';
							form += '</div>';
							
							form += '<div class="mb-3">';
							form += '<label for="api_contact_email" class="form-label">Email</label>';
							form += '<input type="text" class="form-control" id="api_contact_email_' + i + '_' + j + '" value="' + apis_json.apis[i].contact[j].email + '" onchange="' + "saveContact('api_contact_email','" + i + "','" + j + "'); return false;" + '">';
							form += '</div>';

							form += '<div class="mb-3">';
							form += '<label for="api_contact_url" class="form-label">URL</label>';
							form += '<input type="text" class="form-control" id="api_contact_url_' + i + '_' + j + '" value="' + apis_json.apis[i].contact[j].url + '" onchange="' + "saveContact('api_contact_url','" + i + "','" + j + "'); return false;" + '">';
							form += '</div>';							

						}	
					}								
				}
				
				if(!apis_json.common){
					apis_json.common = [];
				}				

				form += '<h3>Common (<a href="#" onclick="addNewCommon(); return false;">Add</a>)</h3>';	
				form += '<p>These are the common properties shared across all of the APIs that are included in this APIs.json index.</p>';	
				for (let j = 0; j < apis_json.common.length; j++) {

					//form += '<hr>';

					form += '<div class="mb-3">';
					form += '<label for="api_common_type" class="form-label">Type</label>';
					form += '<input type="text" class="form-control" id="api_common_type_' + j + '" value="' + apis_json.common[j].type + '" onchange="' + "saveCommon('api_common_type','" + j + "'); return false;" + '">';
					form += '</div>';
					
					form += '<div class="mb-3">';
					form += '<label for="api_common_url" class="form-label">URL</label>';
					form += '<input type="text" class="form-control" id="api_common_url_' + j + '" value="' + apis_json.common[j].url + '" onchange="' + "saveCommon('api_common_url','" + j + "'); return false;" + '">';
					form += '</div>';

				}

				if(!apis_json.maintainers){
					apis_json.maintainers = [];
				}

				form += '<h3>Maintainers (<a href="#" onclick="addNewMaintainer(); return false;">Add</a>)</h3>';	
				form += '<p>These are the names, url, and email of the maintainers of this APis.json index.</p>';	
				for (let j = 0; j < apis_json.maintainers.length; j++) {

					//form += '<hr>';

					form += '<div class="mb-3">';
					form += '<label for="api_maintainer_FN" class="form-label">FN</label>';
					form += '<input type="text" class="form-control" id="api_maintainer_FN_' + j + '" value="' + apis_json.maintainers[j].FN + '" onchange="' + "saveMaintainer('api_maintainer_FN','" + j + "'); return false;" + '">';
					form += '</div>';

					form += '<div class="mb-3">';
					form += '<label for="api_maintainer_url" class="form-label">URL</label>';
					form += '<input type="text" class="form-control" id="api_maintainer_url_' + j + '" value="' + apis_json.maintainers[j].url + '" onchange="' + "saveMaintainer('api_maintainer_url','" + j + "'); return false;" + '">';
					form += '</div>';					
					
					form += '<div class="mb-3">';
					form += '<label for="api_maintainer_email" class="form-label">Email</label>';
					form += '<input type="text" class="form-control" id="api_maintainer_email_' + j + '" value="' + apis_json.maintainers[j].email + '" onchange="' + "saveMaintainer('api_maintainer_email','" + j + "'); return false;" + '">';
					form += '</div>';

				}				

				document.getElementById('form').innerHTML = form;

			}

			function saveChanges(){

				var json_data = JSON.stringify(JSON.parse(document.getElementById('json-store-data').value));
				
				console.log("saving: " + json_data);

				var set = Cookies.set('apis_json', json_data);

				document.getElementById('alert').innerHTML = 'Your APIs.json has been saved to a cookie, and will remain there for editing until you clear your cookies.';
				document.getElementById('alert').style.display = '';			

				}	
				
			function reset() {

				document.getElementById('json-store-data').value = "";
				Cookies.expire('apis_json');
				display();

				}

			function copyToClipboard() {

				//navigator.clipboard.writeText(document.getElementById('json-store-data').value);

				if (navigator.clipboard && window.isSecureContext) {
					navigator.clipboard.writeText(document.getElementById('json-store-data').value);
				} else {
				const textArea = document.createElement("textarea");				
				textArea.value = document.getElementById('json-store-data').value;

				// Move textarea out of the viewport so it's not visible
				textArea.style.position = "absolute";
				textArea.style.left = "-999999px";

				document.body.prepend(textArea);
				textArea.select();

				try {
					document.execCommand('copy');
				} catch (error) {
					console.error(error);
				} finally {
					textArea.remove();
				}

				document.getElementById('alert').innerHTML = 'Your APIs.json has been copied to your clipboard, you can now paste and publish anywhere you like.';
				document.getElementById('alert').style.display = '';

				}	

			}			

			display();
		</script>
	</div>
</section>