cc.js or CodeCanvas.js is a lightweight JavaScript library that allows you to execute JavaScript and apply CSS dynamically within HTML documents using the <cc> tag. Created by Nelsen Niko
cc.js, also known as CodeCanvas.js, is a lightweight JavaScript library that enables the execution of JavaScript and application of CSS dynamically within HTML documents using the <cc> tag. This document provides an overview of the library's features, usage instructions, and API reference.
<cc> tag.To use cc.js in your project, you can include it directly in your HTML file using a <script> tag or integrate it with your build process using a module bundler like Webpack or Rollup.
<script src="cc.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js" defer></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Execute JavaScript</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
console.log('Hello, world!');
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Apply CSS Styles</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
body {
background-color: lightblue;
}
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Execute JSON Object</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
{
"css": [
{
"selector": "h1",
"styles": {
"color": "red",
"font-size": "24px"
}
}
],
"js": [
"console.log('JSON execution')"
]
}
</cc>
<h1>This heading will be styled in red with a font size of 24px</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Dynamically Change Background Color</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
// Dynamically change background color
document.body.style.backgroundColor = 'lightblue';
</cc>
<h1>Welcome to our website!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Copy Text to Clipboard</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<button onclick="copyText()">Copy Text</button>
<cc id="copyTextScript">
// Function to copy text to clipboard
function copyText() {
ccRun.copyToClipboard('Text copied successfully!');
}
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Typing Animation</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<p id="typingText"></p>
<cc id="typingScript">
// Function to type text with animation
ccRun.typeText(document.getElementById('typingText'), 'Hello, world!', 100);
</cc>
</body>
</html>
ccRun.execute()text (string): The text to be copied.true if copying was successful, false otherwise.element (HTMLElement): The HTML element where the text will be typed.text (string): The text to be typed.delay (number): The delay (in milliseconds) between typing each character.cc.js was created by Nelsen Niko.
cc.js is licensed under the MIT License. See the LICENSE file for more details.
FAQs
cc.js or CodeCanvas.js is a lightweight JavaScript library that allows you to execute JavaScript and apply CSS dynamically within HTML documents using the <cc> tag. Created by Nelsen Niko
The npm package codecanvas receives a total of 0 weekly downloads. As such, codecanvas popularity was classified as not popular.
We found that codecanvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Six malicious Packagist packages posing as OphimCMS themes contain trojanized jQuery that exfiltrates URLs, injects ads, and loads FUNNULL-linked redirects.
Security News
The GCVE initiative operated by CIRCL has officially opened its publishing ecosystem, letting organizations issue and share vulnerability identifiers without routing through a central authority.
Security News
The project is retiring its odd/even release model in favor of a simpler annual cadence where every major version becomes LTS.